Implementar Modo Oscuro

[herwingx]

Descripción

Permitir al usuario cambiar entre modo claro y oscuro, y recordar la preferencia.

Tareas

• Añadir un botón o switch (toggle) en el HTML que permita alternar entre modo claro y oscuro.
• Usar JavaScript para:
  • Detectar la preferencia del usuario ( window.matchMedia('(prefers-color-scheme: dark)') ) y aplicar el tema por defecto.
  • Escuchar el evento de clic del botón/switch.
  • Al cambiar el modo, añadir/quitar una clase al elemento body (por ejemplo, dark-mode).
  • Guardar la preferencia del usuario en localStorage para que se recuerde entre sesiones.
• Añadir clases CSS para definir los estilos de modo claro y oscuro:
  • Variables CSS (--background-color, --text-color, etc.) para los colores de cada modo.
  • Usar las variables en los estilos de los elementos.