2019 fue el año del modo oscuro. Prácticamente todos los sistemas tanto móvil como de escritorio y la mayoría de aplicaciones de cierta relevancia, desde Twitter hasta Instagram y casi todas las de Google, empezaron a usarlo.
¿Por qué usar el modo oscuro?
Hay varios motivos. En la industria de la telefonía móvil provoca una mejora directa en la duración y vida útil de la batería. No es de extrañar que desde Android 10 el modo de ahorro de batería implique usar el modo oscuro. De hecho, se calcula que algunas aplicaciones reducen el consumo de batería hasta un 60% cambiando colores. De ahí el auge de los paneles OLED y sus variantes, entre otros motivos.
Ver tu web en colores claros u oscuros debería ser una decisión del usuario. Se entiende mejor cuando se conocen un poco las especificaciónes de CSS. En concreto, la que se utiliza para el modo oscuro, que aparece en el punto 5 de las Media Queries Level 5, es decir: las de preferencias del usuario. Con ellas se permite al usuario escoger ciertas configuraciones relacionadas con las animaciones, las transparencias, los contrastes, o en este caso: el esquema de colores.
Tal y como yo lo veo, si tu web o tu aplicación sólo está en modo oscuro o modo claro, deberías verlo como una carencia o bien ser capaz de justificarlo. Verlo como una carencia es más positivo, porque te da margen a corregirla en el futuro. Justificarlo no lo es tanto, puedes tener tus motivos, pero probablemente sólo esté relacionado con problemas en otros puntos.
Esta plantilla respeta los ajustes del usuario, 💪
Además, hay una cuestión de inclusividad. Lamentablemente no suele ser algo prioritario, pero al menos deberíais conocerlo. Al final de este articulo hay algunos enlaces donde se habla más específicamente de esta cuestión.
En lo personal me resulta molesto estar en la cama mirando algún feed de noticias en semi oscuridad y que al abrir una el móvil se convierta en un flash cegador.
En resumen:
- La industria empuja
- Debería decidirlo el usuario
- Hay una cuestión de inclusividad
- Las apps que aún no lo permiten suelen resultar molestas
- Estamos en 2020
¿Cómo aplicar el modo oscuro a tu web?
En una web es muy fácil hacerlo. Es esencialmente una media query como las que seguramente has usado muchas veces, por ejemplo:
@media (prefers-color-scheme: light) { ... }
@media (prefers-color-scheme: dark) { ... }
Si te preguntas cuantos usuarios usan navegadores que lo permiten, a día de hoy supera el 75%. Con Javascript puedes detectar si el navegador lo permite así:
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all'){
console.log('Lo permite 🦇');
}
Sin entrar en el uso de variables (custom properties) ni nada así, manteniéndolo sencillo sólo para este articulo, un uso real pero sencillo podría ser algo así.
body{
background-color: white;
color: black;
// Esta identación es de SCSS, no de CSS
// Y este tipo de comentarios también 😅
@media (prefers-color-scheme: dark){
background-color: black;
color: white;
}
}
Con esto sería suficiente. Obviamente no tiene nada que ver con un proyecto real, pero no tiene por qué ser mucho más complejo. Si os interesa, esta misma plantilla hace uso del modo oscuro y podéis ver su código en GitHub. Podréis ver que no agrega demasiada complejidad.
Y para terminar
Dejo algunos enlaces sobre el tema que pueden ser de interés.