El Selector de Temas Oscuros y Claros es una característica popular en las aplicaciones modernas. Los usuarios pueden cambiar fácilmente la apariencia de una página o aplicación web para que se adapte a sus preferencias personales. En este tutorial, te guiaré paso a paso en cómo crear un Selector de Temas Oscuros y Claros en Javascript.
Aquí está el código que te permitirá crear un Selector de Temas Oscuros y Claros en Javascript:
HTML:
<!DOCTYPE html> <html> <head> <title>Selector de Temas Oscuros y Claros</title> </head> <body id="body"> <h1>Selector de Temas Oscuros y Claros</h1> <p>Seleccione el tema que desee:</p> <select id="selector-tema"> <option value="tema-claro">Tema Claro</option> <option value="tema-oscuro">Tema Oscuro</option> </select> <div id="cuerpo"> <p>Este es un ejemplo de un párrafo de prueba.</p> </div> <script src="selector-tema.js"></script> </body> </html>
Javascript:
const selector = document.querySelector('#selector-tema');
const cuerpo = document.querySelector('#body');
selector.addEventListener('change', () => {
if(selector.value === 'tema-claro') {
cuerpo.style.backgroundColor = 'white';
cuerpo.style.color = 'black';
} else if (selector.value === 'tema-oscuro') {
cuerpo.style.backgroundColor = 'black';
cuerpo.style.color = 'white';
}
});
Primero, en el HTML, creamos un elemento select con dos opciones: «Tema Claro» y «Tema Oscuro». Luego, creamos un div con el id «cuerpo», que es el área en la que se aplicarán los cambios de tema.
En el archivo Javascript, usamos document.querySelector para seleccionar tanto el select como el div. Luego, agregamos un eventListener para escuchar los cambios en el select. Cuando el usuario selecciona «Tema Claro», cambiamos el fondo del div a blanco y el texto a negro. Cuando el usuario selecciona «Tema Oscuro», cambiamos el fondo del div a negro y el texto a blanco.
En resumen, crear un Selector de Temas Oscuros y Claros en Javascript es una tarea relativamente simple. Con el código proporcionado anteriormente, puedes agregar fácilmente esta característica a tu sitio web o aplicación web. ¡Prueba este código y mejora la experiencia de usuario para tus visitantes!
