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.

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora