Ú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.
Y recordad, si necesita ayuda para implementar el modo oscuro en vuestras webs podéis contactar conmigo y os ayudaré en todo lo posible.
Publicado originalmente en </AJRA>
