prefers-color-scheme: hola oscuridad, mi vieja amiga
¿Sobrevalorado o necesario? Aprenda todo sobre el modo oscuro y cómo utilizarlo en beneficio de sus usuarios.
Introducción #
El modo oscuro previo al Modo oscuro #
Completamos el círculo con el modo oscuro. En los inicios de la informática doméstica, el modo oscuro no era una cuestión de elección, sino un hecho: los monitores monocromáticos CRT para computadoras funcionaban emitiendo haces de electrones sobre una pantalla fosforescente y el fósforo utilizado en los primeros CRT era verde. Debido a que el texto se mostraba en verde y el resto de la pantalla en negro, estos modelos frecuentemente se denominaban pantallas verdes.
Los monitores CRT de color que se introdujeron posteriormente mostraron diferentes colores mediante el uso de fósforos rojos, verdes y azules. Para crear el blanco se activaban los tres fósforos simultáneamente. Con la llegada de la edición por computadora más sofisticada de WYSIWYG, se popularizó la idea de hacer que el documento virtual se pareciera a una hoja de papel física.
En esta época comenzó la tendencia de diseño oscuro sobre blanco, que se trasladó a la primera web basada en documentos. El primer navegador de la historia, WorldWideWeb (recordemos que el CSS aún no se había inventado), mostraba las páginas web de esta manera. Dato curioso: el segundo navegador de la historia, Navegador de modo de línea -un navegador basado en una terminal- era verde sobre oscuro. Hoy en día, las páginas y aplicaciones web se diseñan normalmente con texto oscuro sobre fondo claro, una suposición básica que también está codificada en las hojas de estilo de los agentes de usuario, incluyendo la de Chrome.
Los días de las pantallas CRT quedaron atrás. El consumo y la creación de contenidos se trasladaron a los dispositivos móviles que utilizan pantallas LCD o AMOLED de bajo consumo. Las computadoras, las tabletas y los smartphones, más pequeños y transportables, dieron lugar a nuevos patrones de uso. Las tareas de ocio, como la navegación por Internet, la codificación por diversión y los juegos de alta gama, con frecuencia se llevan a cabo después de las horas de trabajo en entornos poco iluminados. La gente incluso disfruta de sus dispositivos en sus camas durante la noche. Cuanto más utilicen las personas sus dispositivos en la oscuridad, más se popularizará la idea de volver a los orígenes de la luz en la oscuridad.
Por qué el modo oscuro #
El modo oscuro obedece a razones estéticas #
Cuando a la gente se le pregunta por qué le gusta o quiere el modo oscuro, la respuesta más popular es que "es más cómodo para los ojos", seguido de "es elegante y hermoso". Apple, en su documentación para desarrolladores sobre el Modo oscuro, escribe explícitamente: "La elección de activar una apariencia clara u oscura es una cuestión estética para la mayoría de los usuarios, y puede no estar relacionada con las condiciones de iluminación ambiental".
El modo oscuro como herramienta de accesibilidad #
También hay personas que realmente necesitan el modo oscuro y lo utilizan como otra herramienta de accesibilidad, por ejemplo, los usuarios con problemas de visión. La primera vez que encontré una herramienta de accesibilidad de este tipo fue la función CloseView de System 7, que tenía una opción para Negro sobre blanco y Blanco sobre negro. Aunque System 7 era compatible con el color, la interfaz de usuario predeterminada aún era en blanco y negro.
Estas implementaciones basadas en la inversión demostraron sus deficiencias una vez que se introdujo el color. La investigación realizada por Szpiro et al. sobre cómo acceden las personas con problemas de visión a los dispositivos de cómputo mostró que a todos los usuarios entrevistados no les gustaban las imágenes invertidas, pero que muchos preferían el texto claro sobre un fondo oscuro. Apple tiene en cuenta esta preferencia de los usuarios con una función llamada Inversión inteligente, que invierte los colores de la pantalla, excepto en el caso de las imágenes, las redes sociales y algunas aplicaciones que utilizan estilos de color oscuro.
Una forma especial de visión deficiente es el Síndrome visual por computadora, también conocido como Tensión ocular digital, que se define como "la combinación de problemas oculares y visuales asociados al uso de computadoras (incluyendo computadoras de escritorio, portátiles y tabletas) y otras pantallas electrónicas (por ejemplo, smartphones y dispositivos electrónicos de lectura)". Se ha propuesto que el uso de dispositivos electrónicos por parte de los adolescentes, especialmente por la noche, incrementa el riesgo de que la duración del sueño sea menor, la latencia de inicio del sueño sea mayor y la deficiencia de sueño sea mayor. Además, se tiene conocimiento de que la exposición a la luz azul está implicada en la regulación del ritmo circadiano y del ciclo del sueño, y que los entornos con luz irregular pueden conducir a la privación del sueño, lo que puede afectar al estado de ánimo y al rendimiento en las tareas, según una investigación de Rosenfield. Para limitar estos efectos negativos, reducir la luz azul ajustando la temperatura de color de la pantalla mediante funciones como Night Shift de iOS o Luz nocturna de Android puede ayudar, así como evitar las luces brillantes o irregulares en general mediante temas o modos oscuros.
Ahorro de energía en el modo oscuro de las pantallas AMOLED #
Finalmente, se sabe que el modo oscuro ahorra mucha energía en las pantallas AMOLED. Los estudios de casos de Android que se centraron en aplicaciones populares de Google como YouTube han demostrado que el ahorro de energía puede ser de hasta un 60%. El video a continuación tiene más detalles sobre estos estudios de caso y el ahorro de energía por aplicación.
Activación del modo oscuro en el sistema operativo #
Ahora que se han explicado los antecedentes de por qué el modo oscuro es tan importante para muchos usuarios, vamos a repasar cómo se puede hacer uso de él.
Los sistemas operativos que son compatibles con el modo oscuro o el tema oscuro suelen tener una opción para activarlo en algún lugar de la configuración. En macOS X, está en la sección General de las preferencias del sistema y se llama Apariencia (captura de pantalla), y en Windows 10, está en la sección Colores y se llama Elige tu color (captura de pantalla). En el caso de Android Q, se encuentra en Pantalla como interruptor de palanca Tema oscuro (captura de pantalla), y en iOS 13, se puede cambiar la Apariencia en la sección Pantalla y brillo de la configuración (captura de pantalla).
La consulta de medios de prefers-color-scheme #
Un último fragmento de la teoría antes de continuar. Las consultas multimedia permiten a los autores probar y consultar valores o características como el agente de usuario o el dispositivo de visualización, independientemente del documento que se muestra. Se utilizan en la regla CSS @media para aplicar de forma condicional estilos a un documento, y en otros contextos y lenguajes, como HTML y JavaScript. Consultas de medios Nivel 5 introduce las denominadas características multimedia de preferencia del usuario, es decir, una forma en que los sitios detectan la forma preferida por el usuario para mostrar el contenido.
La función multimedia prefers-color-scheme se utiliza para detectar si el usuario solicitó que la página utilice un tema de color claro u oscuro. Funciona con los siguientes valores:
light: Indica que el usuario notificó al sistema que prefiere una página con un tema claro (texto oscuro sobre fondo claro).dark: Indica que el usuario notificó al sistema que prefiere una página con un tema oscuro (texto claro sobre fondo oscuro).
Compatibilidad con el modo oscuro #
Cómo saber si el navegador es compatible con el modo oscuro #
Dado que el modo oscuro se reporta por medio de una consulta de medios, se puede verificar fácilmente si el navegador actual es compatible con el modo oscuro al verificar si la consulta de medios prefers-color-scheme coincide en absoluto. Observe que no incluyo ningún valor, sino que simplemente verifico si la consulta de medios coincide.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}Cuando se redactó este documento, prefers-color-scheme era compatible, tanto en el escritorio como en el dispositivo móvil (cuando estaba disponible), con Chrome y Edge a partir de la versión 76, con Firefox a partir de la versión 67 y con Safari a partir de la versión 12.1 en macOS y de la versión 13 en iOS. Para el resto de navegadores, puede consultar las tablas de compatibilidad Puedo usar.
Conocer las preferencias del usuario durante la solicitud #
El encabezado del cliente hint Sec-CH-Prefers-Color-Scheme permite que los sitios obtengan las preferencias de combinación de colores del usuario de forma opcional en el momento de la solicitud, lo que permite a los servidores estar en los estilos integrados en el código correctos de CSS y, por lo tanto, evitar un efecto flash sobre un tema de color incorrecto.
Modo oscuro en la práctica #
Finalmente veamos cómo se ve en la práctica la compatibilidad con el modo oscuro. Al igual que con el Highlander, en el modo oscuro solo puede haber uno: oscuro o claro, ¡pero nunca ambos! ¿Por qué menciono esto? Porque este hecho debe tener un impacto en la estrategia de carga. No obligue a los usuarios a descargar el CSS en la ruta de renderización crítica que es para un modo que no utilizan actualmente. Para optimizar la velocidad de carga, dividí mi CSS para la aplicación de ejemplo que muestra las siguientes recomendaciones prácticas en tres partes para deferir el CSS no crítico:
style.cssque contiene reglas genéricas que se utilizan de forma universal en el sitio.dark.cssque contiene solo las reglas necesarias para utilizar el modo oscuro.light.cssque contiene solo las reglas necesarias para utilizar el modo ligero.
Estrategia de carga #
Los dos últimos, light.css y dark.css, se cargan condicionalmente con una consulta <link media>. Inicialmente, no todos los navegadores son compatibles con prefers-color-scheme (que se puede detectar usando el patrón anterior), lo que resuelvo de forma dinámica al cargar el archivo light.css de forma predeterminada mediante un elemento <link rel="stylesheet"> insertado de forma condicional en un script de estilos integrados en el código minúsculo (light es una elección arbitraria, también podría haber configurado dark como experiencia predeterminada). Para evitar un flash de contenido sin estilo, oculté el contenido de la página hasta que light.css se cargó.
<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: dark)').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: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />Arquitectura de la hoja de estilo #
Utilizo al máximo las variables de CSS, esto permite que mi style.css genérico sea, bueno, genérico, y que toda la personalización del modo claro u oscuro ocurra en los otros dos archivos dark.css y light.css. A continuación puede ver un fragmento de los estilos reales, pero debería ser suficiente para transmitir la idea general. Declaro dos variables, --color y {--background-color que esencialmente crean un tema de línea de 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);
}En mi style.css, utilizo estas variables en la regla body { ... }. Como están definidas en la pseudoclase :root de CSS, un selector que en HTML representa el elemento <html>, que es idéntico al selector html, excepto que su especificidad sea mayor, se convierten en una cascada, lo que me permite declarar variables CSS globales.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}En el ejemplo del código anterior, probablemente notó una propiedad color-scheme con el valor separado por espacios light dark.
Esto le indica al navegador cuáles son los temas de color que admite mi aplicación y le permite activar variantes especiales de la hoja de estilos del agente de usuario, lo cual es útil para, por ejemplo, permitir que el navegador represente los campos del formulario con un fondo oscuro y un texto claro, para ajustar las barras de desplazamiento o habilitar un color de resaltado que tenga en cuenta el tema. Los detalles exactos de color-scheme se especifican en Módulo de ajuste cromático de CSS en el nivel 1.
Todo lo demás es solo una cuestión de definir variables CSS para las cosas que importan 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 llamar a 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 utilizo en mi ejemplo.
/* 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);
}Ejemplo completo #
En el siguiente Glitch incrustado, podrá ver el ejemplo completo con el que se ponen en práctica los conceptos anteriores. Pruebe a activar el modo oscuro en la configuración de su sistema operativo y vea cómo reacciona la página.
Impacto de la carga #
Cuando juegue con este ejemplo, podrá ver por qué cargo mi dark.css y light.css por medio de consultas de medios. Intente activar el modo oscuro y vuelva a cargar la página: las hojas de estilo concretas que no coincidan en ese momento se seguirán cargando, pero con la prioridad más baja, para que nunca compitan con los recursos que necesita el sitio en ese momento.
prefers-color-scheme carga el CSS en modo oscuro con la prioridad más baja.Cómo reaccionar ante los cambios en el modo oscuro #
Como cualquier otro cambio de consulta de medios, los cambios de modo oscuro se pueden suscribir a través de JavaScript. Puede usar esto para, por ejemplo, cambiar dinámicamente el favicon de una página o cambiar el <meta name="theme-color"> que determina el color de la barra de URL en Chrome. El ejemplo completo de arriba muestra esto en acción, para ver el color del tema y los cambios de favicon, 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'}.`);
});A partir de Chromium 93 y Safari 15, puede ajustar este color basándose en una consulta de medios con el atributo media del elemento con el color del tema meta. Se elegirá el primero que coincida. Por ejemplo, puede tener un color para el modo claro y otro para el modo oscuro. Al momento de escribir esto, no se pueden definir en el manifiesto. Consulte w3c/manifest#975 GitHub issue.
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />Cómo depurar y probar el modo oscuro #
La emulación de prefers-color-scheme en DevTools #
Cambiar el esquema de colores de todo el sistema operativo puede ser molesto muy rápidamente, por lo que Chrome DevTools ahora le permite emular el esquema de colores preferido por el usuario de una manera que solo afecta a la pestaña que se encuentra visible en ese momento. Abra el Menú Comandos, comience a escribir Rendering, ejecute el comando Show Rendering y, a continuación, cambie la opción prefers-color-scheme correspondiente a la función de medios CSS.
Cómo hacer capturas de pantalla mediante prefers-color-scheme con Puppeteer #
Puppeteer es una librería de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través del Protocolo de DevTools. Con dark-mode-screenshot, ofrecemos un script de Puppeteer que le permite crear capturas de pantalla de sus páginas tanto en modo oscuro como claro. Puede ejecutar este script de forma aislada, o hacer que forme parte de su suite para pruebas de integración continua (CI).
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750Prácticas recomendadas del modo oscuro #
Evite el blanco puro #
Un pequeño detalle que tal vez haya notado es que yo no utilizo un blanco puro. En vez de eso, para evitar el brillo y la depuración contra el contenido oscuro adyacente, elijo un blanco ligeramente más oscuro. Algo como rgb(250, 250, 250) funcionará bien.
Cómo volver a colorear y oscurecer imágenes fotográficas #
Si compara las dos capturas de pantalla que aparecen a continuación, se darán cuenta de que no solo el tema principal cambió del modo oscuro sobre claro a claro sobre oscura, sino que también la imagen hero tiene un aspecto un poco diferente. Mi investigación de usuarios mostró que la mayoría de los encuestados prefieren imágenes ligeramente menos vibrantes y brillantes cuando el modo oscuro está activo. Me refiero a esto como recolorización.
La recolorización puede lograrse mediante un filtro de CSS en mis imágenes. Utilizo un selector de CSS que coincide con todas las imágenes que no tienen .svg en su URL, la idea es que puedo dar a los gráficos vectoriales (iconos) un tratamiento de recolorización diferente al de mis imágenes (fotos), puede obtener más información sobre esto en el siguiente párrafo. Observe cómo vuelvo a utilizar una variable de CSS, para poder cambiar posteriormente mi filtro de forma flexible.
Dado que la recolorización solo se necesita en modo oscuro, es decir, cuando dark.css está activo, no hay reglas equivalentes en light.css.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
filter: var(--image-filter);
}Personalización de las intensidades de recolorización en modo oscuro con JavaScript #
No todos somos iguales y la gente tiene diferentes necesidades en el modo oscuro. Al seguir el método de recolorización descrito anteriormente, puedo convertir fácilmente la intensidad de la escala de grises a una preferencia del usuario que puedo cambiar mediante JavaScript, y al establecer un valor de 0%, también puedo desactivar la recolorización por completo. Tenga en cuenta que document.documentElement proporciona una referencia al elemento raíz del documento, es decir, el mismo elemento que puedo hacer referencia con la pseudoclase de CSS :root.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);Invertir iconos y gráficos vectoriales #
Para los gráficos vectoriales, que en mi caso se utilizan como iconos a los que hago referencia por medio de elementos <img>, utilizo un método de recolorización diferente. Aunque la investigación demostró que a la gente no le gusta la inversión de las fotos, funciona muy bien para la mayoría de los iconos. De nuevo, utilizo variables de CSS para determinar la cantidad de inversión en el estado normal y en el :hover.
Observe cómo, de nuevo, solo invierto los iconos en dark.css pero no en light.css, y cómo :hover adopta una intensidad de inversión diferente en los dos casos para que el icono aparezca ligeramente más oscuro o ligeramente más brillante, dependiendo del modo que el usuario haya seleccionado.
/* 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);
}Utilice currentColor para los estilos integrados en el código de SVG #
Para los estilos integrados en el código de las imágenes SVG, en vez de utilizar filtros de inversión, puede aprovechar la palabra clave de CSS currentColor que representa el valor de la propiedad color de un elemento. Esto permite utilizar el valor color en propiedades que no lo incluyen de forma predeterminada. De forma práctica, si currentColor se utiliza como valor de los atributos SVG fill o stroke, toma su valor del valor heredado de la propiedad color. Aún mejor: esto también funciona para <svg><use href="..."></svg>, por lo que puede tener recursos separados y currentColor seguirá aplicándose en el contexto. Tenga en cuenta que esto solo funciona para los estilos integrados en el código o <use href="..."> de los SVG, pero no es que los SVG a los que se hace referencia como el src de una imagen o de alguna manera por medio de CSS. Usted puede ver que esto se aplica en la demostración de abajo.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>Transiciones sencillas entre modos #
El cambio de modo oscuro a modo claro o viceversa puede facilitarse gracias a que tanto color como background-color son propiedades de CSS que se pueden animar. Para crear la animación es tan fácil como declarar dos transition para las dos propiedades. En el siguiente ejemplo se ilustra la idea general, puede experimentarla en vivo en la demostración.
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);
}Dirección de las obras de arte con el modo oscuro #
Aunque por razones del rendimiento de la carga en general le recomiendo trabajar exclusivamente con prefers-color-scheme en el atributo media de los elementos <link> (en vez de en los estilos integrados en el código de las hojas de estilo), hay situaciones en las que puede querer trabajar con prefers-color-scheme directamente en los estilos integrados en el código HTML. La dirección de arte es una de esas situaciones. En la web, la dirección artística se ocupa de la apariencia visual general de una página y de cómo se comunica visualmente, estimula los estados de ánimo, contrasta las características y atrae psicológicamente a un público objetivo.
Con el modo oscuro, depende del criterio del diseñador decidir cuál es la mejor imagen en un modo concreto y si la recolorización de las imágenes tal vez no sea lo suficientemente buena. Si se utiliza con el elemento <picture>, el <source> de la imagen que se mostrará puede depender del atributo media. En el siguiente ejemplo, muestro el hemisferio occidental para el modo oscuro, y el hemisferio oriental para el modo claro o cuando no se indica ninguna preferencia, seleccionando de forma predeterminada el hemisferio oriental en todos los demás casos. Esto es, por supuesto, puramente ilustrativo. 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)">
<img src="eastern.webp">
</picture>Modo oscuro, pero agregue una opción de exclusión #
Como se mencionó en la sección por qué el modo oscuro, el modo oscuro es una opción estética para la mayoría de los usuarios. Por lo tanto, a algunos usuarios les puede gustar tener la interfaz de usuario de su sistema operativo en modo oscuro, pero aún así prefieren ver sus páginas web como están acostumbrados a verlas. Un buen patrón es adherirse inicialmente a la señal que el navegador envía mediante prefers-color-scheme, pero después permitir de forma opcional que los usuarios anulen su configuración a nivel de sistema.
El elemento personalizado <dark-mode-toggle> #
Por supuesto, puede crear el código para hacer esto usted mismo, pero también puede utilizar un elemento personalizado previamente hecho (componente web) que creé justo para este propósito. Se llama <dark-mode-toggle> y agrega un conmutador (modo oscuro: encendido/apagado) o un conmutador de tema (tema: claro/oscuro) a la página que puede personalizar completamente. La demostración que aparece a continuación muestra el elemento en acción (oh, y también le 🤫 eché un vistazo silenciosamente 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 pulsar los controles del modo oscuro en la esquina superior derecha que aparece en la demostración que está más abajo. Si selecciona la casilla del tercer y cuarto control, verá cómo su selección de modo quedará registrada incluso cuando recargue la página. Esto permite que sus visitantes mantengan su sistema operativo en modo oscuro, pero disfruten de su sitio en modo claro o viceversa.
Conclusiones #
Trabajar con el modo oscuro y darle soporte es divertido y abre nuevas posibilidades de diseño. Para algunos de sus visitantes puede ser la diferencia entre no poder manejar su sitio y ser un usuario feliz. Hay algunos obstáculos y es necesario hacer pruebas cuidadosas, pero el modo oscuro definitivamente es una gran oportunidad para demostrar que se preocupa por todos sus usuarios. Las prácticas recomendadas que se mencionan en esta publicación y los helpers como el elemento personalizado <dark-mode-toggle> deberían hacer que confíe en su capacidad para crear una experiencia increíble en modo oscuro. Cuéntelo en Twitter lo que crea y si esta publicación le ha sido útil o si también tiene sugerencias para mejorarla. ¡Gracias por leer! 🌒
Enlaces relacionados #
Recursos para la consulta de medios de prefers-color-scheme
- Página del estado de la plataforma Chrome
- Error en Chromium
- Especificaciones del nivel 5 en las Consultas de medios
Recursos para la color-scheme y la propiedad CSS:
- La propiedad de CSS
color-schemey la etiqueta meta - Página del estado de la plataforma Chrome
- Error en Chromium
- Especificación en el módulo de ajuste sobre el color de CSS de Nivel 1
- El problema de GitHub de CSS WG para la etiqueta meta y la propiedad de CSS
- El problema de GitHub del WHATWG HTML para la etiqueta meta
Enlaces generales del modo oscuro:
- Diseño de materiales: tema oscuro
- Modo oscuro en el Inspector web
- Compatibilidad con el modo oscuro en WebKit
- Normas de la Interfaz Humana para Apple: Modo oscuro
Artículos de investigación de antecedentes para esta publicación:
- ¿Qué hace en realidad el "esquema de colores compatible" con el modo oscuro? 🤔
- ¡Deja que haya oscuridad! 🌚 Tal vez…
- Recolorización para el modo oscuro
Agradecimientos #
La función multimedia prefers-color-scheme, la propiedad de CSS color-scheme y la etiqueta meta relacionada son el trabajo de implementación de 👏 Rune Lillesveen. Rune también es coeditor de la especificación Módulo de ajuste en el color de CSS de Nivel 1. Me gustaría dar las gracias a Lukasz Zbylut, Rowan Merewood, Chirag Desai, y Rob Dodson por sus exhaustivas revisiones de este artículo. La estrategia de carga es obra de Jake Archibald. Emilio Cobos Álvarez me orientó hacia el método correcto de detección prefers-color-scheme. El consejo con los SVG de referencia y currentColor provino de Timothy Hatcher. Por último, agradezco a los numerosos participantes anónimos de los diversos estudios de usuarios que han ayudado a dar forma a las recomendaciones de este artículo. Imagen hero hecha por Nathan Anderson.