CSS para el modo oscuro
El modo oscuro, llamado también tema oscuro o nocturno, es un término de diseño que se usa para describir cualquier esquema de color claro sobre uno más negro y que muchos usuarios prefieren utilizar en entornos con poca luz. Veamos cómo crearlo con CSS para que nuestra Web se adapte al modo oscuro.
Probablemente ya estéis acostumbrados a utilizar las media queries o consulta de medios, que como sabéis, son una sintaxis especial para CSS que permite definir estilos que se aplicarán únicamente si se cumplen unas condiciones específicas. En la consulta de medios prefers-color-scheme, el usuario puede configurar su sistema para usar un tema claro u oscuro y veremos cómo se crea a continuación.
Consultas de medios prefers-color-scheme
Las dos variaciones de la consulta de medios prefers-color-scheme serían:
/ * Modo claro * /
@media (prefers-color-scheme: light) {
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
}
/ * Modo oscuro * /
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}
En el CSS anterior, –body-bgy –body-color son variables CSS y contienen valores diferentes para ambos modos.
En el tema claro se configura un fondo blanco con un texto en negro y en el tema oscuro un fondo negro con el texto en blanco.
Dado que la especificación sugiere que W3C podría introducir valores futuros, tendría sentido convertir este CSS en un booleano.
/* Modo claro */
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
/* Modo oscuro */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}
El código, en esta ocasión, define el tema claro de forma predeterminada y lo cambia a tema oscuro (dark) si le pasamos el valor “dark” a través de la consulta de medios. De esta forma, cualquier valor futuro que se añada a la consulta de medios establecerá el tema claro por defecto.
Usando las variables CSS
Con los diferentes valores componemos el diseño de la página.
body {
background: var(--body-bg);
color: var(--body-color);
}
La sintaxis var () es cómo CSS utiliza las variables. En el código anterior, establecemos en background el valor de –body-bg y en color el valor de –body-color.
Debemos tener en cuenta que los valores de estas variables provienen de la consulta de medios. Lo que significa que el color de fondo y el del primer plano cambian según la configuración del sistema.
Conclusión
Utilizar prefers-color-scheme es similar a utilizar cualquier lenguaje de programación. Se definen variables cuyos valores cambian en función de alguna lógica y luego se utilizan para operaciones posteriores. La capacidad de permitir que nuestro sitio Web se adapte al tema elegido por el usuario es una excelente característica de accesibilidad. Además, las últimas versiones de los navegadores admiten ya prefers-color-scheme, por lo que podemos empezar a experimentar y usar el truco que hemos visto sobre CSS para el modo oscuro.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.