El modo oscuro sigue siendo una tendencia importante en el diseño de sitios web y aplicaciones. Encontramos un gran artículo sobre este tema y decidimos compartir la traducción. La opinión de los usuarios, la implementación y el soporte del modo oscuro, las recomendaciones para los desarrolladores se encuentran más adelante en el artículo. ¿De qué lado estás?
¿Solo una exageración o una necesidad? Obtén más información sobre el modo oscuro. ¡Te mostraré cómo agregar compatibilidad con el modo oscuro en beneficio de tus usuarios!
Introducción
Sobre este tema, realicé un estudio voluminoso, estudié la historia del problema. Si solo está interesado en trabajar con el modo oscuro, no dude en omitir la primera sección.
Modo oscuro antes de que se generalizara
Dicen que la historia es cíclica. En la situación del modo oscuro, volvemos a donde comenzó todo. En los primeros días de las computadoras personales, el modo oscuro era la única opción: los monitores CRT monocromáticos funcionaban irradiando haces de electrones a una pantalla fosforescente, y el fósforo utilizado en los primeros CRT era verde. Dado que el texto se mostraba en verde y el resto de la pantalla en negro, estos modelos a menudo se denominaban pantallas verdes .
Posteriormente, las pantallas CRT en color comenzaron a mostrar múltiples colores mediante el uso de fósforos rojos, verdes y azules. Crearon el blanco activando los tres fósforos al mismo tiempo. Con el advenimiento de la autoedición más moderna y la tecnología WYSIWYG , la idea de hacer que un documento virtual parezca una hoja de papel real se ha vuelto popular.
En este punto del diseño, nació la tendencia "oscuro sobre blanco", que se implementó en los primeros sitios web de la red ; eran más como documentos de texto.
El primer navegador del mundo, WorldWideWeb (imagina que aún no se había inventado CSS ) procesaba las páginas web de esta manera. Dato curioso: el segundo navegador en modo de línea (navegador basado en terminal) era de color verde oscuro. Hoy en día, las páginas web y las aplicaciones generalmente se crean con texto oscuro sobre un fondo claro, que es la norma aceptada. Este esquema de color está integrado en las hojas de estilo de los agentes de usuario modernos, incluido, por ejemplo, Chrome....
Uso de teléfonos inteligentes ( fuente ) Los
días de los monitores CRT han quedado atrás. Ahora consumimos y creamos una gran cantidad de contenido en dispositivos móviles que utilizan pantallas LCD retroiluminadas o pantallas AMOLED energéticamente eficientes. Las computadoras, tabletas y teléfonos inteligentes más pequeños y prácticos han dado lugar a nuevos patrones de comportamiento de los usuarios. En nuestro tiempo libre, desaparecemos en las redes sociales, programamos para divertirnos o jugamos juegos de computadora. Esto suele suceder después del trabajo por la noche con poca luz o incluso por la noche en la cama antes de acostarse. Cuantas más personas usen sus dispositivos en la oscuridad, más popular se volverá el modo oscuro.
¿Por qué elegir el modo oscuro?
Por razones estéticas
Cuando se les pregunta a las personas por qué les gusta el modo oscuro , las respuestas más populares son "Es más agradable a la vista" o "El modo oscuro es hermoso". Apple dice abiertamente en su documentación para desarrolladores para el modo oscuro , "La elección de oscuro o claro para la mayoría de los usuarios se basa en preferencias estéticas y puede no ser relevante para las condiciones de iluminación".
Obtenga más información en el estudio por qué a las personas les encanta el modo oscuro y cómo usarlo.
Sistema 7 CloseView ( fuente )
Modo oscuro como herramienta de accesibilidad para personas con discapacidades
Algunas personas necesitan usar el modo oscuro: por ejemplo, los usuarios con discapacidad visual usan el modo oscuro como herramienta de accesibilidad. El primer uso del modo oscuro como herramienta de accesibilidad que pude encontrar fue la función CloseView en el Sistema 7, con la capacidad de cambiar el esquema de color de negro sobre blanco y blanco sobre negro. Aunque System 7 admitía una interfaz de color, la interfaz de usuario predeterminada era en blanco y negro.
Este método basado en la inversión ha mostrado sus debilidades después de aumentar el número de colores en la interfaz. Sarit Szpiro y un equipo de investigadores realizaron una encuestausuarios sobre cómo las personas con discapacidad visual manejan los dispositivos informáticos. Como resultado, resultó que a todos los encuestados no les gustaban los colores invertidos, pero muchos preferían el texto claro sobre un fondo oscuro. Apple aborda esta preferencia del usuario con Smart Invert , que cambia los colores en la pantalla, excluyendo imágenes, medios y algunas aplicaciones que usan estilos de colores oscuros.
Una forma especial de baja visión es el síndrome de visión por computadora, también conocido como fatiga visual digital. Estos términos significanvarios problemas de visión que están asociados con el uso frecuente de computadoras (computadoras de escritorio, portátiles y tabletas) y otros dispositivos electrónicos (teléfonos inteligentes y libros electrónicos). Los científicos especulan que el uso de dispositivos electrónicos por parte de los adolescentes, especialmente de noche, conduce a un mayor riesgo de problemas de sueño, insomnio y síndrome de privación del sueño. Según otros estudios , los efectos de la luz azul intervienen en la regulación del ritmo circadianoy el ciclo del sueño, y los entornos de luz irregular pueden conducir a la privación del sueño, lo que afecta el estado de ánimo de una persona y la eficiencia en la realización de las tareas. Puede limitar el impacto negativo reduciendo la cantidad de luz azul ajustando la temperatura de color de la pantalla (funciones como iOS Night Shift o Android Night Light ), o evitando la luz brillante o irregular en general con el tema o modo oscuro.
Ahorro de energía en modo oscuro en pantallas AMOLED
Se sabe que el modo oscuro ahorra mucha energía en las pantallas AMOLED. La investigación sobre aplicaciones populares de Google, como YouTube, ha demostrado que el ahorro de energía puede ser de hasta un 60%. El video a continuación proporciona más detalles sobre estos estudios y el ahorro de energía para cada aplicación.
Cómo activar el modo oscuro en el sistema operativo
Ahora que he explicado por qué el modo oscuro es tan importante para muchos usuarios, echemos un vistazo a cómo puede personalizarlo.
La configuración del tema oscuro en Android Q
Los sistemas operativos que admiten el modo oscuro o el tema oscuro generalmente tienen la opción de activarlos en la configuración. En macOS X, se encuentra en la sección General de Preferencias del sistema y se llama Apariencia ( captura de pantalla ), y en Windows 10, está en Colores llamados Elija su color ( captura de pantalla ). Para Android Q, puede cambiar el modo a Mostrar como un tema oscuro ( captura de pantalla ) y en iOS 13, puede cambiar el color de la interfaz en la sección Pantalla y brillo ( captura de pantalla ).
- prefers-color-scheme
Un poco más de teoría antes de continuar. Las consultas de medios permiten a los autores probar y consultar los valores y propiedades de un agente de usuario o dispositivo independientemente de la presentación del documento. Se utilizan en la regla de medios CSS para aplicar estilos de forma condicional a un documento y en algunos otros contextos y lenguajes como HTML y JavaScript. Las consultas de medios de nivel 5 introducen las llamadas propiedades de medios preferidas por el usuario, que son una señal para que los sitios descubran la forma preferida de mostrar el contenido.
El conjunto de propiedades de medios CSS de movimiento reducido de preferencias se puede utilizar para determinar si el usuario solicita al sistema operativo que minimice la cantidad de animación que utiliza. Ya tengoescribí sobre las preferencias de movimiento reducido anteriormente.
La propiedad multimedia de CSS de esquema de color de preferencia se utiliza para determinar qué tema, claro u oscuro, utiliza una persona en el sistema operativo. Funciona con los siguientes valores:
- no-preferencia : Indica que el usuario no ha dado a conocer ninguna preferencia al sistema. Esta palabra clave se evalúa como falsa en un contexto lógico .
- claro : Indica que el usuario ha notificado al sistema que prefiere una página con un tema claro (texto oscuro sobre fondo claro).
- oscuro : Indica que el usuario ha notificado al sistema que prefiere una página con un tema oscuro (texto claro sobre fondo oscuro).
Soporte de modo oscuro
Descubra si el navegador admite el modo oscuro
Dado que el modo oscuro se comunica a través de una consulta de medios, puede verificar fácilmente si el navegador actual admite el modo oscuro averiguando si la consulta de medios es un esquema de color preferido . Tenga en cuenta que no estoy estableciendo el valor, solo estoy comprobando la consulta de medios para una coincidencia.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log(' Dark mode is supported');
}
En el momento de redactar este artículo, el esquema de colores de preferencia es compatible tanto en computadoras de escritorio como en dispositivos móviles (donde esté disponible) en Chrome y Edge desde la versión 76, Firefox desde la versión 67 y Safari desde la versión 12.1 en macOS y desde la versión 13 en iOS. Para todos los demás navegadores, puede encontrar información en el artículo ¿Puedo usar tablas de soporte ?
Hay disponible un elemento <dark-mode-toggle> personalizado que agrega compatibilidad con el modo oscuro a los navegadores más antiguos. Escribiré más sobre esto .
Modo oscuro en la práctica
Echemos un vistazo a cómo se ve la compatibilidad con el modo oscuro en la práctica. Al igual que en la película "Highlander" , al final solo puede haber uno: ¡oscuro o claro! ¿Por qué me estoy enfocando en esto? Porque este hecho afecta la estrategia de carga. No obligue a los usuarios a descargar CSS en una etapa de renderización crítica para un modo que no se esté utilizando actualmente. Por lo tanto, para optimizar la velocidad de carga, he dividido mi CSS en el ejemplo en tres partes para retrasar la carga de CSS no crítico :
- style.css contiene reglas generales que se utilizan en todo el sitio
- dark.css contiene las reglas necesarias para el modo oscuro
- light.css contiene las reglas necesarias solo para el modo ligero.
Estrategia de carga
Los dos últimos, light.css y dark.css, se cargan de forma selectiva mediante una solicitud de <link media>.
Inicialmente, no todos los navegadores admiten la propiedad de medios CSS de esquema de color de preferencia (que se encuentra con el ejemplo anterior ), esto se resuelve seleccionando el light.css predeterminado a través de un elemento en nuestro script en línea (la luz es una elección arbitraria, también podría oscurecer por defecto). Para evitar que aparezca contenido sin estilo , oculto el contenido de la página hasta que se cargue light.css.
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = ``">'
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">
Arquitectura de hoja de estilo
Estoy usando variables CSS , lo que permite que style.css sea genérico, toda la configuración del modo claro u oscuro ocurre en otros dos archivos: dark.css y light.css. A continuación se muestra un ejemplo que debería ser suficiente para explicar la idea general. Declaro dos variables, --color y --background-color, que crean un tema base oscuro sobre claro y claro sobre oscuro.
/* light.css: dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
Luego, en style.css utilizo estas variables en el cuerpo {...} . Porque están definidos en la pseudoclase CSS : root - un selector que representa el elemento <html> en HTML y es idéntico al selector html , excepto que su especificidad es mayor: las variables están en cascada, permitiendo así la definición de variables CSS globales.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}En el ejemplo anterior, probablemente notó la propiedad de combinación de colores con valores claros y oscuros separados por un espacio.
La propiedad le dice al navegador qué temas de color admite mi aplicación y le permite activar variaciones especiales de la hoja de estilo del agente de usuario. Esto es útil, por ejemplo, para permitir que el navegador muestre campos de formulario con fondos oscuros y texto claro, personalizar barras de desplazamiento o habilitar colores de resaltado basados en temas. Los detalles de la propiedad del esquema de color se especifican en el Módulo de ajuste de color CSS Nivel 1 .
Obtenga más información sobre la combinación de colores .
Todo lo demás es solo estilo CSS para el resto del marcado que tengo en mi sitio. La organización semántica de estilos ayuda mucho cuando se trabaja con el modo oscuro. Por ejemplo, en lugar de --highlight-yellow, considere nombrar la variable --accent-color , ya que "amarillo" puede no ser amarillo en el modo oscuro, o viceversa. A continuación se muestra un ejemplo de algunas variables más que estoy usando.
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}Análisis detallado
En el siguiente cuadro Glitch puedes ver un ejemplo que usa todo lo descrito arriba, en la práctica. Intente alternar el modo oscuro en la configuración de su sistema operativo y vea cómo reacciona la página.
Impacto en la velocidad de descarga
Cuando juegues lo suficiente con este ejemplo, podrás ver por qué cargo mi dark.css y light.css a través de consultas de medios. Intente alternar el modo oscuro y recargar la página: ciertas hojas de estilo que actualmente no coinciden todavía se están cargando, pero con la prioridad más baja para que no compitan con los recursos que el sitio necesita en este momento.
Descubra por qué los navegadores cargan hojas de estilo con consultas de medios no coincidentes .
El sitio web claro carga los
estilos oscuros de menor prioridad: El sitio web oscuro carga los estilos claros de menor prioridad:
El sitio predeterminado con una máscara clara en un navegador que no admite el esquema de color preferido carga los estilos oscuros con la prioridad más baja:
Cómo responder a los cambios del modo oscuro
Como cualquier otro cambio de consulta de medios, puede suscribirse a un cambio de modo oscuro a través de JavaScript. Puede usar esto, por ejemplo, para cambiar dinámicamente el icono de la página o cambiar el <meta name = "theme-color"> que determina el color de la barra de URL en Chrome. El ejemplo anterior muestra lo que se describe en acción. Para ver el tema y los cambios de color de los iconos, abra la demostración en una pestaña separada .
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? ' on' : '️ off'}.`);
});Mejores prácticas del modo oscuro
Evite el
blanco puro Es posible que haya notado un pequeño detalle: no estoy usando blanco puro. En cambio, para evitar que el contenido oscuro circundante brille, elegí un blanco ligeramente más oscuro, algo así como rgb (250, 250, 250) .
Cambiar el color y el oscurecimiento de las imágenes fotográficas
Si compara las dos capturas de pantalla a continuación, notará que no solo el tema principal ha cambiado de oscuro a claro a claro a oscuro, sino que la imagen se ve un poco diferente. Mi encuesta descubrió que la mayoría de los usuarios prefieren imágenes un poco menos brillantes y saturadas cuando el modo oscuro está activo. Yo llamo a esto re-colorear.
imagen en modo claro Puede cambiar el color de las imágenes con un filtro CSS. Estoy usando un selector de CSS que se adapta a todas las imágenes que no tienen .svg en sus URL. La idea es que pueda darle a los gráficos vectoriales (iconos) un tratamiento diferente, más sobre eso en la siguiente sección . Observe cómo estoy usando la variable CSS nuevamente para poder cambiar rápidamente mi filtro más tarde.
Obtenga más información sobre las preferencias de los usuarios en la investigación .
Dado que el repintado solo es necesario en el modo oscuro, es decir, cuando dark.css está activo, no hay reglas correspondientes en light.css .
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
filter: var(--image-filter);
}
Ajustar la intensidad del cambio de color del modo oscuro con JavaScript
Somos diferentes, y cada persona tendrá sus propias ideas sobre cómo debería verse exactamente el modo oscuro. Al ceñirme al método de cambio de color descrito anteriormente, puedo hacer que la intensidad de la escala de grises sea una preferencia del usuario, que cambia con JavaScript , y al establecerlo en 0% , puedo desactivar el cambio de color por completo. Tenga en cuenta que document.documentElement proporciona un enlace al elemento raíz del documento, es decir, el mismo elemento al que puedo hacer referencia usando la pseudoclase CSS : root .
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);Invertir vectores e iconos
Para los gráficos vectoriales (en mi caso, utilizados como iconos, a los que me refiero a través de elementos <img> ), utilizo un método de cambio de color diferente. Si bien la investigación ha demostrado que a las personas no les gusta la inversión de fotos, funciona muy bien para la mayoría de los íconos. Vuelvo a utilizar variables CSS para determinar el grado de inversión en los estados normal y : hover .
El ícono está invertido en modo oscuro:
Ícono en modo claro: observe
cómo nuevamente solo invierto íconos en dark.css pero no en light.css , y cómo : hover obtiene diferentes intensidades de inversión en dos casos para que el icono se vea un poco más oscuro o un poco más brillante, según el modo seleccionado por el usuario.
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*=".svg"] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*=".svg"]:hover {
filter: var(--icon-filter_hover);
}Usar currentColor para SVG en línea
En lugar de usar filtros inversos para imágenes SVG en línea, puede agregar la palabra clave currentColor , que representa el valor de color del elemento.
Esto le permite establecer un valor de color para las propiedades que no lo reciben de forma predeterminada. De hecho, si currentColor se utiliza como valor para los atributos de trazo o relleno de SVG, entonces toma su valor de la propiedad de color heredada. Esto también funciona para <svg> <use href = "…"> </svg> , por lo que puede tener recursos separados y currentColor se seguirá aplicando en contexto. Tenga en cuenta que esto solo funciona para inline o <use href = "...">SVG, pero no para SVG, que se denominan imágenes src o mediante CSS. Más detalles aquí .
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>Transiciones suaves entre modos
El cambio de oscuro a claro o viceversa se puede suavizar debido al hecho de que el color y el fondo son propiedades CSS animables . La animación es tan fácil como declarar dos transiciones para dos propiedades. El siguiente ejemplo ilustra la idea general.
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition:
color var(--duration) var(--timing),
background-color var(--duration) var(--timing);
}Diseño artístico con modo oscuro
Si bien, por razones de rendimiento de carga en general, recomiendo trabajar exclusivamente con el esquema de color de preferencias en el atributo de medios de los elementos (y no en línea en las hojas de estilo), hay situaciones en las que es posible que desee trabajar con el esquema de color de preferencia en línea en su HTML. el código. La decoración es una situación así. Diseño artístico: el diseño visual general de la página: cómo el sitio afecta al usuario, qué sentimientos evoca.
En el modo oscuro, el diseñador debe decidir qué imagen elegir y si las imágenes se volverán a colorear.adecuado. Al usar el elemento <picture>, la imagen mostrada <source> puede hacerse dependiente del atributo de los medios. En el siguiente ejemplo, estoy mostrando el hemisferio occidental para el modo oscuro y el hemisferio este para el modo claro o, cuando no se especifica ninguna configuración, el valor predeterminado para el hemisferio oriental de todos modos. Por supuesto, las imágenes solo ilustran mi ejemplo . Active el modo oscuro en su dispositivo para ver la diferencia.
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)">
<source srcset="eastern.webp" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
<img src="eastern.webp">
</picture>Modo oscuro desactivado
Como se mencionó anteriormente, la mayoría de los usuarios eligen el modo oscuro en función de sus gustos y preferencias estéticas. A algunos usuarios les gusta ver la interfaz de usuario de su sistema operativo oscura y sus páginas web como están acostumbrados. Plan de acción: primero espere la señal que envía el navegador a través del esquema de colores preferidos y luego permita que los usuarios anulen la configuración a nivel del sistema si lo desean.
Elemento personalizado <dark-mode-toggle>
Por supuesto, puede crear dicho código usted mismo, pero simplemente puede usar un elemento listo para usar (componente web) que creé específicamente para este propósito. Se llama <dark-mode-toggle> y agrega un conmutador (modo oscuro: encendido / apagado) o un selector de tema (tema: claro / oscuro) a su página que puede personalizar por completo. La siguiente demostración muestra el elemento en acción (oh, y lo he usado discretamente en todos los otros ejemplos anteriores ).
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle><dark-mode-toggle> en modo claro:
<dark-mode-toggle> en modo oscuro:
Intente hacer clic o tocar los controles del modo oscuro en la esquina superior derecha en la siguiente demostración. Si marca las casillas en los controles tercero y cuarto, vea cómo se recuerda su elección de modo incluso en las recargas de página. Esto permite a sus visitantes mantener su sistema operativo en modo oscuro pero disfrutar de su sitio en modo claro o viceversa.
Conclusión
¡Trabajar y mantener el modo oscuro es divertido! Se abren nuevas posibilidades de diseño. Elegir un modo oscuro puede hacer más feliz a su usuario. Sí, existen dificultades y se requieren pruebas rigurosas, pero el modo oscuro es una gran oportunidad para demostrar que te preocupas por tus usuarios. Las mejores prácticas mencionadas en este artículo y un truco de vida como el elemento personalizado <dark-mode-toggle> deberían ayudarlo a crear un modo oscuro increíble.
Enlaces útiles
Prefiere la consulta de medios de esquema de color :
- Página de estado de la plataforma Chrome
- Error de cromo
- Especificaciones de Media Queries Level 5
Combinación de colores etiqueta meta :
- Página de estado de la plataforma Chrome
- Error de cromo
- Especificaciones de nivel 1 del módulo de ajuste de color CSS
- Problema de CSS WG GitHub para la metaetiqueta y la propiedad CSS
- HTML WHATWG GitHub Issue for the meta tag
dark mode:
- Material Design — Dark Theme
- Dark Mode in Web Inspector
- Dark Mode Support in WebKit
- Apple Human Interface Guidelines — Dark Mode
:
- What Does Dark Mode’s “supported-color-schemes” Actually Do?
- Let there be darkness! Maybe…
- Re-Colorization for Dark Mode