Y no, no estamos hablando de la última tendencia de Star Wars, sino más bien de la interfaz favorita de la mayoría de usuarios de dispositivos móviles. Pero, ¿por qué nos gusta tanto el “modo oscuro”?
El aspecto visual del Modo Oscuro encaja con las ultimas tendencias de diseño, generando así un diseño actual y moderno.
Lejos de aspectos gráficos, su principal beneficio tiene que ver con el rendimiento de la batería: la luminosidad de los colores que se muestran en la pantalla influyen directamente en el consumo del dispositivo. Usando el «modo oscuro», el ahorro puede llegar hasta un 60% con el brillo al máximo y prolongar así la vida útil de la batería de nuestro dispositivo. Es cierto que este ahorro de consumo varía si nuestro dispositivo tiene una pantalla con paneles AMOLED o paneles LCD, donde el impacto de ahorro es inferior.
Pero también ayuda a mejorar la lectura, debido a un menor cansancio de la vista. Si sufres fotofobia, el Modo Oscuro es ideal para ti, aunque en caso de sufrir astigmatismo, el Modo Oscuro puede causarte fatiga visual, al tener que forzar mas la vista para leer los textos blancos sobre un fondo oscuro. Para grandes masas de texto, el «Dark Mode» no es lo mejor, por algo los papeles en libros son blancos y las letras negras. Este dato tendremos que tenerlo en cuenta dependiendo del contenido de nuestro site o aplicación.
Guias que deberías seguir
Sin pretender hacer aquí un tutorial de diseño, estas son algunas guías que deberías seguir para que tus diseños estén optimizados en el uso del «modo oscuro»:
- No usar el negro #000000. Es recomendable utilizar grises muy oscuros, casi negros, como el #121212.
- Utiliza el blanco #FFFFFF para los elementos principales y grises para elementos secundarios.
- Ten cuidado con la paleta de colores. Debes conseguir el suficiente contraste y puedes caer en el error de usar colores demasiado chillones. Es vital la relación de contrastes y aplicar el color correctamente.
- Evita los colores saturados, ya que no pasarán el estándar de accesibilidad de 4.5: 1 y provocan fatiga visual.
- Utilizando el media query prefers-color-scheme (aún no complatible con todos los navegadores) puedes detectar facilmente si tu usuario tiene activo el modo oscuro, aplicando diferentes estilos. Si no, puedes diseñar todo directamente con fondo oscuro y letras claras, y así se verá bien en ambos modos.
- Utiliza siempre imágenes transparentes. No hay nada peor que ver un icono con un recuadro blanco sobre el fondo negro del modo oscuro.
- Escoge una tipografía adecuada. Tipografías muy finas dificultarán la lectura.
Resumiendo, nos encontramos ante una nueva tendencia que requiere un poco de previsión y adaptar nuestros diseños. Como siempre, ¡testea en ambos modos para conseguir los mejores resultados! ¡Que la fuerza te acompañe!
