El modo oscuro ha ganado popularidad en los últimos años debido a su impacto en la experiencia de usuario, la reducción de la fatiga visual y el ahorro de batería en dispositivos móviles con pantallas OLED. En este capítulo, exploraremos cómo implementar el modo oscuro y otros temas responsivos utilizando CSS, media queries y variables CSS.

¿Qué es el Modo Oscuro?

El modo oscuro es una opción de diseño donde los colores de fondo de la interfaz son oscuros, mientras que los textos y elementos interactivos son claros. Muchos usuarios prefieren el modo oscuro para reducir la fatiga ocular, especialmente en entornos con poca luz.

El diseño de un sitio web debe ser lo suficientemente flexible como para adaptarse a las preferencias del usuario. A través de las media queries y las variables CSS, puedes implementar de forma dinámica el modo oscuro y otros temas, ofreciendo una experiencia personalizada.

Esta imagen muestra una comparación entre dark theme vs light theme

Implementación Básica de Modo Oscuro con Media Queries

La media query prefers-color-scheme permite detectar si el usuario ha configurado su dispositivo para usar un esquema de color oscuro o claro. Según esta preferencia, podemos ajustar los estilos del sitio web automáticamente.

css

En este ejemplo, el color de fondo y el color del texto cambian según si el dispositivo está configurado en modo oscuro o claro. Las variables CSS facilitan la gestión de estos temas.

Alternar Manualmente Entre Modo Claro y Oscuro

Además de detectar la preferencia del sistema, es común permitir a los usuarios alternar manualmente entre el modo oscuro y el modo claro. Esto se puede lograr usando JavaScript para cambiar los valores de las variables CSS.

html

En este ejemplo, un botón permite alternar entre el modo claro y oscuro, agregando o eliminando la clase dark-mode del elemento body. Las transiciones se aplican para hacer que el cambio de tema sea más suave.

Temas Responsivos con Variables CSS

Las variables CSS son extremadamente útiles para implementar otros tipos de temas responsivos, como temas basados en colores específicos de marca o estilos estacionales (por ejemplo, un tema de invierno). Puedes definir diferentes esquemas de color y permitir a los usuarios alternar entre ellos.

css

Modo Oscuro y Ahorro de Energía

El modo oscuro no solo mejora la experiencia del usuario, sino que también puede ayudar a ahorrar energía en dispositivos con pantallas OLED. En este tipo de pantallas, los píxeles oscuros consumen menos energía que los píxeles brillantes. Al implementar el modo oscuro, puedes mejorar la eficiencia energética de tu sitio web en estos dispositivos.

Ejemplo Completo de Modo Oscuro y Temas Responsivos

A continuación, un ejemplo completo de cómo combinar el modo oscuro y los temas responsivos utilizando media queries, variables CSS y JavaScript:

html

Conclusión

El modo oscuro y los temas responsivos son herramientas poderosas para mejorar la experiencia del usuario y hacer que los sitios web sean más dinámicos y personalizados. Al utilizar media queries y variables CSS, puedes ofrecer una mayor flexibilidad en el diseño y adaptarlo según las preferencias de los usuarios o las condiciones del dispositivo.