🌙 Proyecto Modo Oscuro Dinámico: Dale Vida a Tu Sitio con JavaScript y CSS

¿Alguna vez has notado cómo muchas páginas te permiten cambiar entre modo claro y oscuro? Desde YouTube hasta GitHub, esta opción mejora la experiencia del usuario y la accesibilidad. Hoy vamos a construir esa funcionalidad tú mismo, usando HTML, CSS y JavaScript.

🔧 ¿Qué vas a lograr hoy?

Al final de esta sesión, tu sitio web podrá:

• Cambiar entre modo claro y oscuro con un botón.

• Recordar la preferencia del usuario usando localStorage.

• Mostrar transiciones suaves al cambiar de tema.

• Validar que los elementos que estás manipulando existan realmente.

• Cambiar el ícono o texto del botón según el modo activo.

Todo esto usando JavaScript moderno, con estructuras condicionales, manipulación del DOM y diseño CSS adaptativo.

🧠 Antes de empezar…

Piensa: ¿Prefieres modo claro o modo oscuro? Esta simple pregunta se convierte en una experiencia interactiva cuando sabes cómo programarla. Para lograrlo, hoy repasamos algunos temas clave:

• querySelector para seleccionar cualquier elemento del DOM.

• classList.toggle() para alternar clases como dark-mode.

• if (element) para asegurarte de que estás manipulando algo que existe.

• localStorage para guardar el modo elegido y recordarlo la próxima vez.

💡 Estructura general del proyecto

1. HTML: Un botón para activar el modo oscuro, y una estructura básica con body como contenedor principal.

   
   

   

   
   
   
   
   
   

2. CSS: Estilos para modo claro y modo oscuro. Transiciones suaves para que el cambio no sea brusco. 

   
   

   

3. JavaScript: Activamos el cambio de tema con un botón. Detectamos si ya hay un modo guardado. Si lo hay, lo aplicamos al cargar. También cambiamos el texto o ícono del botón.

   
   

   

   
   
   
   
   
   

🚀 Reto extra

1. Personaliza el botón con un ícono de luna y sol.

2. Haz que el sitio detecte automáticamente la preferencia del sistema con:

   
   

   

🎉 Conclusión

Con unas pocas líneas de CSS y JavaScript, lograste un sitio mucho más moderno e interactivo. Ahora tus visitantes podrán elegir el tema que prefieran, ¡y tu web brillará en cualquier dispositivo! 🌙☀️

(blog creado por Isaac Castillo)