El dark mode es un cambio temporal en la paleta de colores en la que se invierten los colores de los elementos de la interfaz para utilizar unos claros sobre un fondo oscuro. También se reduce el brillo, lo que evita que la vista se canse y aumenta así el ahorro de la batería.
Desde que se hizo popular el diseño en dark mode tanto para sistemas operativos como iOS, Android o Windows, han lanzado documentación sobre cómo diseñar y crear con su modo oscuro (eso significa Dark Mode). Una forma de diseño “ecológica”, ya que te permite ahorrar la batería de los dispositivos.
Desde que iniciaron las interfaces gráficas hemos visto texto blanco y pantalla negra, así fue desde el inicio. Las primeras pantallas o monitores de rayos catódicos utilizaban fosforescencia para mostrar letras con un background negro.
Después, con nueva tecnología en pantallas y el software Wordperfect se quiso emular la hoja blanca de papel y así siguió evolucionando el light mode y sus contrastes.
Contraste en diseño gráfico y cómo contrastar colores.
En el 2017 el diseñador Sylvain Boyer propuso al mundo una campaña de ecobranding: reducir el uso de colores en logos populares, para que cuando se impriman se use menos tinta. Luego trasladó esta idea hacia la interfaz de smartphones y le llamó FriendlUI “el primer dark mode”. También lo puedes ver en su página de behance.
El modo oscuro se utiliza para reducir la luz que emiten las pantallas de los dispositivos. No tienes por qué usar simplemente blanco y negro, pero te tienes que asegurar de que las relaciones de contraste entre los colores sean adecuadas para que la interfaz sea legible.
¿Sabes qué es accesibilidad web?
Foto del Dark Theme del Material Design de Google
Las interfaces oscuras minimizan la fatiga visual y suelen ser minimalistas y elegantes. Además, los estándares de contraste de color necesarios consiguen que sea fácil de navegar. Estas son las principales características que hacen que sea más accesible:
Y con la salida de Material Design de Google y Dark Mode en iOS 13 era cuestión de tiempo que la mayoría de productos y servicios digitales adoptaran este nuevo look. Vemos también que los servicios de streaming usan un dark mode, como Netflix o HBO Max.
El uso de dark mode debe ser opción del usuario, y así lo aconseja Norman Nielsen Group. Incluso en algunos sistemas operativos está configurado para que durante el día se use el light mode, y a partir de la noche se cambia toda la interfaz a dark mode.
También tienes que asegurarte de ajustar bien los colores de todos los componentes para que no se pierda su importancia en las funcionalidades, al cambiar del modo claro al oscuro. Tienes que poner el foco en la legibilidad, el contraste y el propósito del producto.
Si quieres empezar a usar Dark Mode usa las guías de cada sistema operativo, aquí te compartimos las de Google y la iOS. Y si quieres aprender a aplicar la teoría del color en diseño UX, no dudes en tomar el Curso de Diseño en Modo Oscuro.
Ahora nos toca preguntarte ¿qué modo UI te gusta usar a ti? ¿Light mode o Dark mode?
¿Platzi ya tiene Dark Mode? 😄
Lo puedes forzar si quieres (si tienes Chrome o Brave) puedes usar los google flags con este comando en el buscador chrome://flags, en el buscador que te aparece escribes: Force dark mode, y lo habilitas para todas las paginas es un modo experimental por lo que en algunas paginas los colores no contrastaran pero es bastante util :3
También está la extensión dark reader.
Indeed.
https://darkreader.org/
Soy del equipo
**Modo Oscuro**Puede agregarse el Dark Mode aunque sea una aplicación que no sea movil?
Efectivamente, puedes acceder a esta opción para otros dispositivos desde el navegador de Chrome o Brave. La forma de hacerlo es la siguiente, en el buscador accedes a
chrome://flagsy desde la nueva ventanaExperimentsque te aparece buscasdark mode. Cuando lo habilites te aparecerán en modo oscuro en los lugares que lo tengan disponible.Buen artículo. Aún mejor la recomendación de establecer el modo oscuro como default. Quién iba a pensar que los coboleros y otros samurais, ya usaban el darkmode!
Dark mode team!!
Como soy visionaria!
Siempre tuve mi blog en dark mode ajaja no mentira pero si es verdad que siempre me gusto mas el modo oscuro, en realidad como bien dice la nota me pareció mas elegante.
https://viajesybibliotecas.blogspot.com/
Me descargue una platilla HTML y reforme un poco la estética del blog
Me fue divertido en su momento y lo deje como un portfolio de mis trabajos pero luego con la pandemia muto a un espacio de Download de mis pasamientos.
Me sigue divirtiendo mucho escribir alli. Aunque tambien lo hago en cuadernos y libretas
A mi por el contrario el dark mode me genera una fatiga visual. Es por eso que en ciertas páginas de platzi cambio el css un poco para generar un “light mode”. Por si alguien le interesa dejo el link para que vea como queda. https://twitter.com/eperedo/status/1379135428662591495
¡Hola! 👋🏽
Wow, nunca había conocido a alguien que le diera fatiga visual el dark mode. Tienes una propuesta super interesante, me pareció increíble. 😨
Hola, gracias! Sí existimos personas que por distintos motivos no podemos usar dark mode, pero al parecer entre programadores no somos muchos 🤭. Por eso lo ideal es siempre ofrecer ambos modos en una app.
Tienes mucha razón. 😊
Aunque como lo podemos ver en el curso, hay situaciones en las que es mejor usar el dark mode.
¡El curso de dark mode fue increíble! ❣
Amé ver todo el contexto histórico que le dieron, las explicaciones profundas de en qué situaciones es mejor usarlo. Mil gracias por tan excelente curso. ❣❣
Excelente!
😄
El Dark Mode es otro level
Absolutamente !
hola
El dark mode es cuando la paleta de los colores cambia temporalmente
Hola !
El dark mode es genial