Código para aplicar el “Modo Oscuro” en tu web.

Dark Mode Código CSS

Últimamente esta muy de moda lo del “Modo Oscuro”.
La mayoría de los dispositivo ya vienen con la opción a nivel de OS de configurar el “modo oscuro” para que las aplicaciones adapten sus colores dependiendo de como lo tengamos configurado.

¿Pero que pasa con las páginas web?
Bien, pues hoy os traigo un sencillo código CSS mediante el cual podremos hacer que los colores de nuestra web se adapten al “modo oscuro” dependiendo de la configuración del dispositivo de cada usuario.

Lo que tendremos que usar el la funcion *prefers-color-scheme*.
La cual nos permitirá detectar si un usuario tiene activado o no el modo oscuro.

PREFERS-COLOR-SCHEME

El prefers-color-scheme tiene tres opciones:

prefers-color-scheme: no-preference
prefers-color-scheme: Light
prefers-color-scheme: Dark

Vamos a ver un ejemplo:

@media (prefers-color-scheme: dark) {
.body.dark-scheme {
height: 100%;
background: black;
color: white;
}

Con este código le estaremos diciendo al navegador que si el dispositivo tiene el “modo oscuro” (Dark) modifique el color de fondo a negro y el texto a blanco.


Os animo a probar y experimentar con el código prefers-color-scheme.

Por si lo necesitáis os dejo un código de ejemplo en mis CodePen’s.

See the Pen Web con modo oscuro by AJRA (@AJRA_TONI) on CodePen.


Y recordad, si necesita ayuda para implementar el modo oscuro en vuestras webs podéis contactar conmigo y os ayudaré en todo lo posible.