prefers-color-scheme
La función prefers-color-scheme consulta la solicitud de colores que el usuario prefiere en su sistema.
light: Cuando el usuario ha indicado que prefiere tener colores claros.dark: Cuando el usuario ha indicado que prefiere tener colores oscuros.
@media (prefers-color-scheme: light) {
body {
background: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
Imágenes en modo oscuro
Si bien ya tienes una forma de adaptar tu sitio a un modo oscuro, ¿qué pasa con las imágenes? Me refiero a que esos colores vibrantes y coloridos que van a seguir conservándose a pesar de que tu sitio este adaptado a un tema oscuro.
Para que tus imágenes luzcan acorde a tu tema, puedes utilizar un filtro de CSS en conjunto de un sector que aplique en cualquier imagen a excepción de .svg.
@media (prefers-color-scheme: dark) {
img:not([src*=".svg"]) {
filter: grayscale(50%);
}
}
Otra opción para tus imágenes puede ser el elemento <picture/> con el atributo media para consultar el tema del usuario y así elegir la imagen apropiada.
<picture>
<source srcset="light-image.jpg" media="(prefers-color-scheme: light)">
<source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
<img src="light-image.jpg">
</picture>
En el siguiente ejemplo se evalúa la preferencia de color del usuario, en caso de ser light se usa la imagen light-image.jpg en caso de ser dark se usa dark-image.jpg y por defecto se muestra light.image.jpg.
Si te interesa saber más sobre <picture/> te dejo mi artículo Mejorando la carga de un sitio web: Imágenes vs. velocidad
en donde explico dicha etiqueta más a detalle.
Antes de finalizar, como un dato curioso, ¿sabías que el modo oscuro ahorra mucha energía en las pantallas AMOLED? Hay estudios que se centraron en aplicaciones de Google como YouTube que han demostrado el ahorro de hasta 60% 🤯 . Por si te interesa saber más del tema, te dejo el siguiente video para más detalles.
