El modo oscuro dejó de ser una rareza y pasó a estar integrado en sistemas operativos, apps y webs.
En una página web se puede detectar la preferencia del usuario con la media query prefers-color-scheme.
Qué hace prefers-color-scheme
prefers-color-scheme permite saber si el usuario tiene configurado modo claro u oscuro en su dispositivo.
Las opciones habituales son:
no-preferencelightdark
Ejemplo básico
Este sería un ejemplo mínimo:
body {
background: #ffffff;
color: #111111;
}
@media (prefers-color-scheme: dark) {
body {
background: #111111;
color: #f5f5f5;
}
}
Con ese código, la web mantiene colores claros por defecto y cambia a fondo oscuro cuando el dispositivo indica que el usuario prefiere modo oscuro.
No basta con invertir colores
Un buen modo oscuro necesita revisar:
- Contraste del texto.
- Estados de botones.
- Bordes y fondos de tarjetas.
- Formularios.
- Imágenes con fondo transparente.
- Logotipos.
- Sombras.
Si no se hace con cuidado, el modo oscuro puede empeorar la legibilidad.
También hay que vigilar rendimiento y CSS innecesario, igual que haríamos al revisar PageSpeed o ajustes visuales en herramientas como Elementor 2.8.
El modo oscuro llegó también a apps populares como WhatsApp y clientes de correo como Spark, así que la web no podía quedarse atrás.
Si quieres implementar modo oscuro en tu web sin romper legibilidad, marca o rendimiento, puedes escribirme a ajra@ajra.es.