prefers-color-scheme: Hola, oscuridad, mi viejo amigo

¿Sobrecargado o necesidad? Aprende todo sobre el modo oscuro y cómo lograrlo en beneficio de los usuarios.

Thomas Steiner

Introducción

Modo oscuro antes del Modo oscuro

Completamos el proceso con el modo oscuro. En los inicios de la computación personal, el modo oscuro no era una cuestión de elección. sino un hecho: Monitores de computadora monocromáticos CRT que funcionan con haces de electrones en una pantalla fosforescente, y el fósforo que se usó en las primeras CRT era verde. Debido a que el texto se mostraba en verde y el resto de la pantalla estaba en negro, estos modelos a menudo se denominaban pantallas verdes.

Las CRT de color presentadas posteriormente mostraban varios colores gracias al uso de fósforos rojo, verde y azul. Crearon el blanco activando los tres fósforos al mismo tiempo. Con la llegada de un WYSIWYG más sofisticado publicación para computadoras, se hizo popular la idea de hacer que el documento virtual se pareciera a una hoja física de papel.

Aquí es donde comenzó la tendencia de diseño oscuro sobre blanco, y esta tendencia se transfirió la Web basada en documentos de forma anticipada. El primer navegador de la historia, WorldWideWeb (recuerda aún no se inventó el CSS). las páginas web mostradas de esta manera. Dato curioso: el segundo navegador, El navegador de modo de línea, un navegador basado en terminales, era verde sobre oscuro. En la actualidad, las páginas web y las aplicaciones web suelen diseñarse con texto oscuro sobre un fondo claro, una suposición de referencia que también está codificada en las hojas de estilo del usuario-agente, que incluye Chrome.

Venció la época de las CRT. El consumo y la creación de contenido se trasladaron a los dispositivos móviles que usen una LCD con retroiluminación o de ahorro de energía AMOLED. Las computadoras, tablets y smartphones más pequeños y fáciles de transportar dieron lugar a nuevos patrones de uso. Tareas de ocio, como navegación web, programación de diversión y videojuegos refinados con frecuencia ocurren fuera del horario de atención en entornos con poca luz. Las personas incluso disfrutan de sus dispositivos en la cama durante la noche. Cuantas más personas usen sus dispositivos en la oscuridad, más popular se vuelve la idea de volver a las raíces del claro sobre la oscuridad.

Por qué usar el modo oscuro

El modo oscuro por razones estéticas

Cuando se les pregunte a los usuarios por qué les gusta o quieren el modo oscuro, la respuesta más popular es que "es más fácil para los ojos", seguido de “es elegante y hermoso”. Una manzana en su Documentación para desarrolladores sobre el modo oscuro explícitamente escribe: "La elección de permitir una apariencia oscura o clara es una estética para la mayoría de los usuarios y es posible que no se relacione con las condiciones lumínicas del ambiente”.

El modo oscuro como herramienta de accesibilidad

También hay personas que necesitan el modo oscuro y lo usan como otra herramienta de accesibilidad. por ejemplo, usuarios con baja visión. El primer caso de una herramienta de accesibilidad de este tipo que pude encontrar fue la función CloseView del sistema 7, que tenía un botón de activación para Negro sobre blanco y Blanco sobre negro. Si bien el sistema 7 admitía colores, la interfaz de usuario predeterminada aún era en blanco y negro.

Estas implementaciones basadas en inversión demostraron sus debilidades una vez que se introdujo el color. Investigación sobre usuarios realizada por Szpiro et al. el cómo las personas con visión reducida acceden a los dispositivos informáticos mostró que a todos los usuarios entrevistados no les gustaron las imágenes invertidas, pero muchos preferían texto claro sobre un fondo oscuro. Apple adapta esta preferencia de usuario con una función llamada Inversión inteligente, que revierte los colores de la pantalla, excepto para las imágenes, el contenido multimedia y algunas apps que usan estilos de color oscuro.

Una forma especial de visión reducida es el síndrome de la visión artificial, también conocido como debilitamiento ocular digital, que se definidos como "la combinación de problemas oculares y de visión asociados con el uso de computadoras (incluidas computadoras de escritorio, laptops y tablets) y otras pantallas electrónicas (p.ej., smartphones y dispositivos electrónicos de lectura”. Se propusó que el uso de dispositivos electrónicos por parte de los adolescentes, sobre todo de noche, aumenta el riesgo de que el sueño dure menos, una mayor latencia cuando se duerme y una mayor deficiencia del sueño. Además, la exposición a la luz azul ha sido informado participar en la regulación de ritmo circadiano y el ciclo de sueño, y entornos de luz irregulares pueden provocar la privación del sueño, que posiblemente afecte el estado de ánimo y el desempeño en las tareas, según investigación de Rosenfield. Para limitar estos efectos negativos, reducir la luz azul ajustando la temperatura de color de la pantalla mediante funciones como iOS Night Shift o uno de Android La Luz nocturna puede ayudar, Evita las luces brillantes o irregulares en general con temas oscuros o modos oscuros.

Ahorro de energía en el modo oscuro en pantallas AMOLED

Por último, se sabe que el modo oscuro ahorra mucha energía en Pantallas AMOLED Casos de éxito de Android centrados en apps populares de Google como YouTube han demostrado que el ahorro de energía puede ser de hasta un 60%. En el siguiente video, se incluyen más detalles sobre estos casos de éxito y el ahorro de energía por app.

Activa el modo oscuro en el sistema operativo

Ahora que vimos el trasfondo de por qué el modo oscuro es tan importante para muchos usuarios, veamos cómo puedes lograrlo.

Sistemas operativos que admiten un modo o tema oscuro suelen tener la opción de activarlo en alguna parte de la configuración. En macOS X, se encuentra en la sección General de la preferencia del sistema y se llama Appearance (captura de pantalla). En Windows 10, está en la sección Colores y se llama Elige tu color (captura de pantalla). En el caso de Android Q, puedes encontrarlo en Display como un interruptor de Tema oscuro (captura de pantalla), En iOS 13, puedes cambiar la opción Appearance en la sección Display & Brillo de la configuración (captura de pantalla).

La búsqueda de medios prefers-color-scheme

Un último consejo teórico antes de empezar. Consultas de medios Permitir que los autores prueben y consulten valores o funciones del usuario-agente o del dispositivo de visualización independiente del documento que se renderiza. Se usan en la regla @media de CSS para aplicar estilos a un documento de forma condicional. y en varios otros contextos y lenguajes, como HTML y JavaScript. Nivel 5 de las búsquedas de medios presenta las llamadas funciones multimedia de preferencias del usuario, una forma para que los sitios detecten la forma preferida del usuario de mostrar contenido.

La prefers-color-scheme se usa una función multimedia para detectar si el usuario solicitó que la página use 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 admite el modo oscuro

Como el modo oscuro se informa a través de una consulta de medios, puede verificar fácilmente si el navegador actual admite el modo oscuro comprobando si la consulta de medios prefers-color-scheme coincide. Observa que no incluyo ningún valor, sino que solo veo si la consulta de medios por sí sola coincide.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Al momento de la redacción, prefers-color-scheme es compatible con computadoras de escritorio y dispositivos móviles (donde esté disponible). por Chrome y Edge desde la versión 76; Firefox desde la versión 67 y Safari a partir de la versión 12.1 en macOS y a partir de la versión 13 en iOS. Para todos los demás navegadores, puedes consultar ¿Puedo usar tablas de compatibilidad?

Información sobre las preferencias de un usuario en el momento de la solicitud

El encabezado de sugerencia del cliente Sec-CH-Prefers-Color-Scheme permite que los sitios obtengan las preferencias de esquema de colores del usuario opcionalmente en el momento de la solicitud. lo que permite que los servidores inserten el CSS correcto y, por lo tanto, evitan un destello de un tema de color incorrecto.

El modo oscuro en la práctica

Por último, veamos cómo es la compatibilidad con el modo oscuro en la práctica. Al igual que con Highlander, Con el modo oscuro, solo puede haber uno: oscuro o claro, pero nunca ambos. ¿Por qué menciono esto? Porque este hecho debería influir en la estrategia de carga. No fuerces a los usuarios a descargar CSS en la ruta de acceso de representación crítica. para un modo que no usa actualmente. Para optimizar la velocidad de carga, dividí el CSS en la app de ejemplo. que muestre las siguientes recomendaciones en práctica se divide en tres partes para diferir el uso de CSS no crítico:

• Es una style.css que contiene reglas genéricas que se usan universalmente en el sitio.
• dark.css que contiene solo las reglas necesarias para el modo oscuro
• light.css que contiene solo las reglas necesarias para el modo claro

Cargando estrategia

Los dos últimos, light.css y dark.css, se cargan de forma condicional con una consulta <link media>. Al principio, no todos los navegadores admiten prefers-color-scheme (detectable mediante el patrón anterior), que manejo de forma dinámica cargando el archivo light.css predeterminado mediante un elemento <link rel="stylesheet"> insertado de forma condicional en una pequeña secuencia de comandos intercalada (la luz es una opción arbitraria, también podría haber hecho a la oscura la experiencia de resguardo predeterminada). Para evitar un destello de contenido sin estilo, haz lo siguiente: 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: 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

Uso al máximo las variables de CSS, Esto permite que mi style.css genérico sea genérico Además, toda la personalización del modo oscuro o claro ocurre en los otros dos archivos dark.css y light.css. A continuación, puedes ver un extracto de los estilos reales, pero debería ser suficiente para transmitir la idea general. Declaro dos variables, -⁠-⁠color y -⁠-⁠background-color que, en esencia, crean un tema de referencia claro sobre claro y uno 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, uso estas variables en la regla body { … }. Como se definen en el Peudoclase :root de CSS: una que, en HTML, representa el elemento <html> y es idéntica al selector html, excepto que su especificidad es más arriba: caen en cascada, lo que me sirve para declarar variables de CSS globales.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

En la muestra de código anterior, es probable que hayas notado una propiedad color-scheme con el valor separado por espacios light dark.

Esta opción indica al navegador qué temas de color admite mi app y permite activar variantes especiales de la hoja de estilo del usuario-agente lo que es útil, por ejemplo, para permitir que el navegador renderice campos con un fondo oscuro y texto claro, ajusta las barras de desplazamiento, o para habilitar un color de resaltado adaptado al tema. Los detalles exactos de color-scheme se especifican en Nivel del módulo Ajuste de color de CSS 1.

Todo lo demás se trata solo de definir las variables de CSS para cuestiones importantes de mi sitio. La organización semántica de los estilos ayuda mucho cuando se trabaja con el modo oscuro. Por ejemplo, en lugar de -⁠-⁠highlight-yellow, considera llamar a la variable -⁠-⁠accent-color, como "amarillo" puede que no sea amarillo en el modo oscuro o viceversa. A continuación, se muestra un ejemplo de algunas variables más que uso 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 la siguiente incorporación de Glitch, puedes ver el ejemplo completo que pone en práctica los conceptos anteriores. Intenta activar o desactivar el modo oscuro en la configuración del sistema operativo específica y ver cómo reacciona la página.

Cargando impacto

Cuando juegues con este ejemplo, podrás ver por qué cargo mis dark.css y light.css mediante consultas de medios. Intenta activar o desactivar el modo oscuro y vuelve a cargar la página: las hojas de estilo particulares que actualmente no coinciden, pero con la prioridad más baja, para que nunca compitan con los recursos que el sitio necesita en este momento.

Cómo reaccionar ante los cambios en el modo oscuro

Al igual que cualquier otro cambio de consulta de medios, los cambios en el modo oscuro se pueden suscribir a través de JavaScript. Puedes usar esta opción, por ejemplo, para cambiar de forma dinámica ícono de página de una página o cambiar la <meta name="theme-color"> que determina el color de la barra de URL en Chrome. El ejemplo completo anterior muestra esto en acción. Para ver los cambios en el color del tema y el ícono de página, abre la demostración en una pestaña aparte.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

A partir de Chromium 93 y Safari 15, puede ajustar el color según una Consulta de medios con el atributo media del elemento de color de tema meta. El el primero que coincida. Por ejemplo, podrías tener un color para el modo claro y otro para el modo oscuro. Al momento de la redacción, no puedes las definirás en tu manifiesto. Consulta w3c/manifest#975 GitHub problema.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Depura y prueba el modo oscuro

Emulando prefers-color-scheme en Herramientas para desarrolladores

Cambiar el esquema de colores de todo el sistema operativo puede volverse molesto por lo que las Herramientas para desarrolladores de Chrome ahora te permiten emular el esquema de colores preferido del usuario. de una manera que solo afecta a la pestaña actualmente visible. Abre el menú de comandos, comienza a escribir Rendering, ejecuta el comando Show Rendering y, luego, cambia la opción Emulate CSS media feature prefers-color-scheme.

Captura de pantalla de prefers-color-scheme con Puppeteer

Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través de la Protocolo de Herramientas para desarrolladores. Con dark-mode-screenshot, proporcionamos un guion de Puppeteer que te permite crear capturas de pantalla de tus páginas en modo oscuro y claro. Puedes ejecutar esta secuencia de comandos de forma excepcional o hacer que forme parte de tu Paquete de pruebas de integración continua (CI).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Prácticas recomendadas para el modo oscuro

Evita el blanco puro

Un pequeño detalle que quizás hayas notado es que no uso blanco puro. Para evitar que brille y sangra en el contenido oscuro que lo rodea, Elijo un blanco un poco más oscuro. Algo como rgb(250, 250, 250) funciona bien.

Cómo volver a colorear y oscurecer imágenes fotográficas

Si comparas las dos capturas de pantalla que aparecen a continuación, notarás que no solo cambió el tema principal de dark-on-light a light-on-dark, pero la imagen hero también se ve un poco diferente. Mi investigación sobre usuarios demostró que la mayoría de las personas encuestadas prefieren imágenes un poco menos brillantes y brillantes cuando el modo oscuro está activo. Me refiero a esto como recoloración.

La nueva coloración se puede lograr a través de un filtro CSS en mis imágenes. Uso un selector CSS que coincide con todas las imágenes que no tienen .svg en la URL. la idea es que puedo darles un tratamiento de recoloración diferente a los gráficos vectoriales que mis imágenes (fotos); más información sobre esto en el próximo párrafo. Observa que, una vez más, utilizo una variable CSS, para poder cambiar el filtro más adelante de manera flexible.

Como la recoloración solo es necesaria 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);
}

Cómo personalizar la intensidad de la recoloración del modo oscuro con JavaScript

No todos son iguales y las personas tienen diferentes necesidades de modo oscuro. Al seguir el método de recoloración descrito anteriormente, Puedo convertir fácilmente la intensidad en escala de grises en una preferencia del usuario. cambio mediante JavaScript También puedo inhabilitar por completo la opción de volver a colorear si estableces un valor de 0%. Ten en cuenta que document.documentElement proporciona una referencia al elemento raíz del documento es decir, el mismo elemento al que puedo hacer referencia Seudoclase :root de CSS.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Invertir íconos y gráficos vectoriales

Para los gráficos vectoriales, que en mi caso se usan como íconos a los que hago referencia mediante elementos <img>, usar un método de recoloración diferente. Si bien la investigación ha demostrado que a la gente no le gusta la inversión para las fotos, funciona muy bien para la mayoría de los iconos. Una vez más, utilizo variables de CSS para determinar el importe de la inversión. en el estado regular y en el estado :hover.

Observa que, una vez más, solo invierto íconos en dark.css, pero no en light.css, y cómo :hover obtiene una intensidad de inversión diferente en ambos casos para que aparezca el ícono. un poco más oscura o un poco más brillante, según el modo que haya seleccionado 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);
}

Usa currentColor para los SVG intercalados.

Para imágenes SVG intercaladas, en lugar de usar filtros de inversión, haz lo siguiente: puedes aprovechar el currentColor Palabra clave de CSS que representa el valor de la propiedad color de un elemento. Esto te permite usar el valor color en propiedades que no lo reciben de forma predeterminada. De manera conveniente, si se usa currentColor como valor del SVG. Atributos fill o stroke, sino que 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 puedes tener recursos separados y currentColor se seguirán aplicando en contexto. Ten en cuenta que esto solo funciona para SVG intercalados o de <use href="…">, pero no los SVG a los que se hace referencia como src de una imagen ni, de algún modo, a través de CSS. Puedes ver esto aplicado en la siguiente demostración.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transiciones fluidas entre modos

Cambiar del modo oscuro al claro, o viceversa, puede suavizarse gracias a que que tanto color como background-color son propiedades de CSS animadas. Crear la animación es tan fácil como declarar dos transition para las dos propiedades. El siguiente ejemplo ilustra la idea general, puedes experimentarla en vivo 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 artística con modo oscuro

Si bien, en general, por motivos de rendimiento de carga, te recomiendo trabajar exclusivamente con prefers-color-scheme. en el atributo media de los elementos <link> (en lugar de intercalado en las hojas de estilo), Existen situaciones en las que quizás desees trabajar con prefers-color-scheme directamente intercalado en tu código HTML. La dirección artística es una situación así. En la Web, la dirección de arte se ocupa de la apariencia visual general de una página y cómo se comunica visualmente, Estimula estados de ánimo, contrasta características y atrae psicológicamente a un público objetivo.

Con el modo oscuro, depende del diseñador decidir cuál es la mejor imagen en un modo particular y si la recoloración de las imágenes tal vez no sea lo suficientemente buena. Si se usa 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 da preferencia, y se cambia de forma predeterminada al hemisferio oriental en todos los demás casos. Esto es meramente ilustrativo. Activa el modo oscuro en tu 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 puedes inhabilitarlo

Como se mencionó anteriormente en la sección por qué el modo oscuro, el modo oscuro es una elección estética para la mayoría de los usuarios. En consecuencia, es posible que algunos usuarios quieran tener la IU del sistema operativo en la oscuridad, pero igualmente prefieren ver sus páginas web del modo en que están acostumbrados a verlas. Un buen patrón es adherirse inicialmente a la señal que el navegador envía prefers-color-scheme, pero permitir que los usuarios anulen su configuración a nivel del sistema de forma opcional

El elemento personalizado <dark-mode-toggle>

Por supuesto, puedes crear el código para esto, pero también puedes usar un elemento personalizado (componente web) listo para usar que creé para este fin. Se llama <dark-mode-toggle> y agrega un botón de activación (modo oscuro: activado/desactivado) o un selector de temas (tema claro/oscuro) en tu página que puedes personalizar completamente La siguiente demostración muestra el elemento en acción (Ah, y también 🤫 se mete en silencio en todas las otro ejemplos más arriba).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

En la demostración de abajo, haz clic en los controles de modo oscuro o presiónalos en la esquina superior derecha. Si marcas la casilla de verificación del tercer y el cuarto control, comprueba el modo en que se recuerda incluso cuando vuelves a cargar la página. Esto permite a los visitantes mantener el sistema operativo en modo oscuro pero disfruta tu sitio en modo claro o viceversa.

Conclusiones

Trabajar con el modo oscuro y admitirlo es divertido y abre nuevos caminos de diseño. Para algunos de sus visitantes, puede ser la diferencia entre no poder administrar su sitio y ser un usuario satisfecho. Hay algunas dificultades y definitivamente se requieren pruebas cuidadosas pero el modo oscuro es, sin dudas, una gran oportunidad para demostrar que te importan todos los usuarios. Las prácticas recomendadas mencionadas en esta publicación y los ayudantes como el Elemento personalizado <dark-mode-toggle> deben brindarte confianza en tu habilidad para crear una experiencia increíble en el modo oscuro. Dime en Twitter qué creas y si esta publicación te resultó útil. o también sugerencias para mejorarlo. ¡Gracias por leer esta información! 🌒

Vínculos relacionados

Recursos para la consulta de medios prefers-color-scheme:

• Página de estado de la plataforma Chrome
• Error de Chromium
• Especificaciones del nivel 5 para las consultas de medios

Recursos para la metaetiqueta color-scheme y la propiedad CSS:

• La propiedad de CSS y la metaetiqueta color-scheme
• Página de estado de la plataforma Chrome
• Error de Chromium
• Especificación del nivel 1 del módulo de ajuste de color de CSS
• Problema de GitHub con CSS WG para la metaetiqueta y la propiedad de CSS
• Problema de GitHub de HTML con QUÉWG para la metaetiqueta

Vínculos generales del modo oscuro:

• Material Design: Tema oscuro
• Modo oscuro en el Inspector web
• Compatibilidad con el modo oscuro en WebKit
• Lineamientos de la interfaz humana de Apple: Modo oscuro

Artículos de investigación previos para esta entrada:

• ¿Qué hacen los "esquemas de colores compatibles" del Modo oscuro ¿De verdad? 🤔
• Que haya oscuridad 🌚 Quizás...
• Recoloración para el modo oscuro

Agradecimientos

La función multimedia prefers-color-scheme, la propiedad color-scheme de CSS y la metaetiqueta relacionada son el trabajo de implementación de 👏 Rune Lillesveen. Rune también es coeditor de la especificación del Módulo de ajuste de color de CSS nivel 1. Quiero 🙏 agradecer a Lukasz Zbylut, Rowan Merewood, Chirag Desai y Rob Dodson por revisar exhaustivamente este artículo. La estrategia de carga es idea original de Jake Archibald. Emilio Cobos Álvarez me indicó el método de detección de prefers-color-scheme correcto. La sugerencia con los SVG a los que se hace referencia y currentColor provino de Tomás Hatcher. Finalmente, agradezco a la gran cantidad de participantes anónimos de los distintos estudios de usuarios. que ayudaron a dar forma a las recomendaciones de este artículo. Imagen hero de Nathan Anderson.