El modo oscuro, además de ser una tendencia popular, mejora la experiencia del usuario al reducir la fatiga visual, especialmente en entornos de poca luz. Implementarlo en tu página web es sencillo y no requiere frameworks avanzados. A continuación, exploramos cómo lograrlo utilizando CSS y JavaScript.
1. Estructura HTML básica
Comencemos con un archivo HTML simple que incluye un botón para cambiar entre el modo claro y oscuro:
2. Diseñando los estilos con CSS
Define los estilos para los modos claro y oscuro. Usa la clase dark-mode para personalizar la apariencia en el tema oscuro.
3. Añadiendo interactividad con JavaScript
El siguiente código activa y desactiva la clase dark-mode en el elemento "body" al hacer clic en el botón.
4. Guardar la preferencia del usuario con localStorage
Para mejorar la experiencia, guarda la preferencia del usuario para que se mantenga al recargar la página.
5. Mejorando con preferencias del sistema
Usa la media query prefers-color-scheme para aplicar automáticamente el tema según la configuración del sistema.
Con estos pasos, tendrás un sitio web que permite alternar entre modo claro y oscuro de manera fluida, respetando las preferencias del usuario y las configuraciones del sistema. Esto no solo mejora la accesibilidad, sino también la experiencia general de navegación.