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

Vamos a implementar el modo oscuro y claro utilizando HTML, CSS y JavaScript mediante la propiedad prefers-color-scheme disponible para las media queries.

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.

1. ¿Qué es prefers-color-scheme?

prefers-color-scheme es una propiedad de las media queries introducida en CSS para detectar si el usuario tiene una preferencia de esquema de color establecida en su sistema operativo. Esta característica nos permite adaptar la estética de nuestras aplicaciones web al esquema de color preferido del usuario.

La implementación de prefers-color-scheme consiste en definir reglas CSS específicas para cada tema de color. Por ejemplo, podemos utilizar esta media query para establecer diferentes combinaciones de colores, estilos de texto y fondos según la preferencia del usuario.

@media (prefers-color-scheme: light) {
  /* Estilos para el modo claro */
  body {
    background-color: #fff;
    color: #222;
  }
}
@media (prefers-color-scheme: dark) {
  /* Estilos para el modo oscuro */
  body {
    background-color: #222;
    color: #fff;
  }
}

2. Cómo usar prefers-color-scheme

Como hemos visto en el ejemplo anterior, puedes usar la propiedad dentro de una media query 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.

3. Ejemplo en CodePen que te permite alternar entre modos usando JS

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.

4. 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.

5. 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: Algunos diseños y colores simplemente se ven mejor y son más coherentes en un tema claro.

6. 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.

¿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 nos permite adaptar fácilmente las aplicaciones a las preferencias de esquema de color de los usuarios. Al ofrecer modos oscuro y claro, no sólo mejoramos la experiencia del usuario, sino que también contribuimos a reducir la fatiga visual y el consumo de energía en dispositivos OLED.