El modo oscuro y claro con CSS: conoce prefers-color-scheme

Veamos el modo oscuro y claro en el Desarrollo Web utilizando HTML, CSS y JavaScript. Conoce la propiedad prefers-color-scheme.

A medida que los dispositivos electrónicos forman parte integral de nuestra vida cotidiana, la experiencia del usuario se ha vuelto esencial. Una de las características más solicitadas en la interfaz de usuario es la capacidad de cambiar entre el modo oscuro y el modo claro. Veamos cómo se puede hacer con CSS utilizando la propiedad prefers-color-scheme.

¿Qué es prefers-color-scheme?

prefers-color-scheme es una característica de Media Query introducida en CSS para detectar si el usuario tiene una preferencia de esquema de color establecida en su sistema operativo. Esta característica permite a los desarrolladores adaptar la estética de sus aplicaciones y sitios web al esquema de color preferido del usuario, ya sea oscuro o claro.

Cómo usar prefers-color-scheme

Para empezar, puedes usar la propiedad dentro de una consulta de medios para aplicar estilos específicos según la preferencia del usuario:

/* Estilos por defecto (modo claro) */
body {
    background-color: white;
    color: black;
}

/* Estilos para el modo oscuro */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

Con el código anterior, si un usuario ha establecido su preferencia a modo oscuro en su sistema operativo, tu sitio web se adaptará automáticamente para reflejar esta preferencia.

Ejemplo en CodePen

Veamos un ejemplo sencillo de una página web que puede alternar entre modos claro y oscuro utilizando prefers-color-scheme y un botón para permitir a los usuarios cambiar manualmente entre los dos modos usando JS.

0

Consideraciones a tener en cuenta

• Compatibilidad: Aunque la mayoría de los navegadores modernos soportan prefers-color-scheme, siempre es bueno comprobar la compatibilidad antes de implementarlo.
• Fuerza del usuario: Aunque prefers-color-scheme detecta la preferencia del sistema operativo, es una buena práctica proporcionar a los usuarios un interruptor para cambiar entre modos dentro de tu sitio web. De esta manera, los usuarios tienen la última palabra.
• Imágenes y otros elementos: No olvides que cambiar el esquema de color no sólo implica adaptar colores de fondo y texto. Es posible que también necesites adaptar imágenes, sombras y otros elementos para garantizar una legibilidad y estética óptimas en ambos modos.

Ventajas del uso del modo claro

1. Legibilidad: Para muchos usuarios, el texto oscuro sobre fondo claro resulta más legible, especialmente en condiciones de mucha luz ambiental.
2. Naturalidad: El modo claro se asemeja al formato tradicional de papel negro sobre blanco, lo que puede ser más familiar y menos fatigante para algunos usuarios.
3. Estética y Diseño: Algunos diseños y colores simplemente se ven mejor y son más coherentes en un tema claro.

Ventajas del uso del modo oscuro

1. Reducción de la fatiga visual: En entornos con poca luz, el modo oscuro puede ser menos agresivo para los ojos y reducir la fatiga visual.
2. Ahorro de energía: En pantallas OLED y AMOLED, los píxeles negros están apagados, lo que puede resultar en un menor consumo de energía.
3. Enfoque: El modo oscuro puede minimizar las distracciones y ayudar a los usuarios a concentrarse en el contenido principal, especialmente en aplicaciones de codificación o diseño.
4. Estilo Moderno: Muchos usuarios consideran que el modo oscuro tiene una apariencia más moderna y estilizada.

¿Qué son los dispositivos OLED? OLED significa «Organic Light Emitting Diodes» (Diodos Emisores de Luz Orgánicos). A diferencia de las pantallas LCD, que requieren una fuente de luz de fondo para iluminar los píxeles, cada píxel en una pantalla OLED produce su propia luz. Esta diferencia fundamental permite que las pantallas OLED ofrezcan negros verdaderos, ya que un píxel negro está completamente apagado y no emite luz alguna

Como ves, la propiedad prefers-color-scheme de CSS es una herramienta interesante que permite a los desarrolladores adaptar fácilmente sus sitios web y aplicaciones a las preferencias de esquema de color de los usuarios. Al ofrecer modos oscuro y claro, no sólo mejoras la experiencia del usuario, sino que también puedes contribuir a reducir la fatiga visual y el consumo de energía en dispositivos OLED.