Modo oscuro en CSS | Programar Plus

Con la introducción del modo oscuro en macOS, Safari Technology Preview 68 ha lanzado una nueva función llamada prefers-color-scheme que nos permite detectar si el usuario tiene habilitado el modo oscuro con una consulta de medios. Safari Technology Preview 71 también tiene supported-color-schemes, lo cual … bueno, no podría decirles exactamente lo que hace.

La consulta de medios es así:

@media (prefers-color-scheme: dark) {

}

Es posible que todavía no sea compatible en todas partes, pero es una gran mejora progresiva, está implementado de una manera buena / inteligente / compatible con los estándares, por lo que es seguro comenzar a usarlo. ¡Al igual que prefiere el movimiento reducido!

No se trata solo de configurar fondos oscuros con texto claro …

Recientemente, Mark Otto describió cómo podemos comenzar a usar el esquema de colores de preferencia hoy para crear temas que se ajusten dinámicamente a la nueva configuración del usuario. Y lo bueno de esta publicación es que Mark lo enmarca como un problema de accesibilidad y muestra cómo lo usa en su propio sitio web para ajustar las imágenes para que no sean demasiado brillantes para el usuario:

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

En el código anterior, Mark detecta si el usuario tiene habilitado el modo oscuro con la consulta de medios y luego oscurece las imágenes para que coincidan con un fondo oscuro.

Las propiedades personalizadas de CSS pueden resultar útiles

Esto me recuerda una excelente publicación de Marcin Wichary donde explora una técnica similar y va un paso más allá al agregar todo tipo de filtros para asegurarse de que tengan un contraste mucho mayor.

html {
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
}

html[data-theme="dark"] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
}

No significa que tengas que renunciar a tu marca

Andy Clarke también escribió algunas ideas sobre cómo aprovechar esta nueva y elegante función CSS y cómo podríamos aplicar un tema oscuro en nuestro sitio web. Describe cómo elegir colores para que nuestros temas claros / oscuros sean consistentes en términos de marca y cómo podríamos querer usar un peso de fuente más claro para fondos más oscuros. El escribe:

Diseñar para el modo oscuro no debería limitarse a elegir colores más oscuros. También debe considerar la posibilidad de modificar los estilos de tipografía para mantener la legibilidad para las personas que usan el modo oscuro. El texto claro sobre fondos oscuros tiene un contraste más alto que cuando se usan los mismos colores al revés, por lo que para facilitar la lectura de sus diseños en modo oscuro, deberá agregar más espacio blanco / oscuro al texto.

Si sus fuentes ofrecen un peso más liviano, usarlo para su diseño de modo oscuro abrirá las formas de las letras y las hará parecer más separadas …

¿Qué fue eso? ¡Seguro que sonó como el alegre aplauso de los nerds y diseñadores de la tipografía en todas partes!

Se trata de diseño inclusivo

Charles Reynolds-Talbot escribe sobre su amiga Molly, que tiene problemas con fondos blancos de alto contraste con texto negro:

Suponiendo que un cambiador de estilo es la solución a este problema, no es nada nuevo. Es algo que ya no está de moda. Pero esto no debería tener que ver con la moda, se trata de un diseño inclusivo para todos. Resolver este problema para Molly también resolverá los problemas de otras personas. Un modo oscuro será mejor para las personas que padecen migrañas, tienen resaca o simplemente navegan por la web en la cama por la noche con la luz apagada. Diseñar para unos pocos mejora las cosas para muchos.

Modo oscuro por defecto

Recuerde que puede revertirlo y oscurecerse de forma predeterminada, pero cambiar a un tema claro si un usuario lo desea específicamente:

body {
  background-color: black;
  color: white;
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}