¿Sobrevalorado o necesario? Obtén toda la información sobre el modo oscuro y cómo admitirlo para beneficiar a tus usuarios.
Introducción
Modo oscuro antes del Modo oscuro
Completamos el ciclo del modo oscuro. En los inicios de la computación personal, el modo oscuro no era una opción, sino un hecho: los monitores de computadora monocromáticos CRT funcionaban disparando haces de electrones sobre una pantalla fosforescente, y el fósforo que se usaba en los primeros CRT era verde. Debido a que el texto se mostraba en verde y el resto de la pantalla era negro, estos modelos a menudo se conocían como pantallas verdes.
Los CRT de color que se introdujeron posteriormente mostraban varios colores a través del uso de fósforos rojos, verdes y azules. Crearon el color blanco activando los tres fósforos de forma simultánea. Con la llegada de la publicación de escritorio WYSIWYG más sofisticada, se popularizó la idea de hacer que el documento virtual se pareciera a una hoja de papel física.
Aquí es donde 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 (recuerda que CSS aún no se había inventado), mostraba las páginas web de esta manera. Dato curioso: El segundo navegador de la historia, Line Mode Browser, un navegador basado en terminal, era verde sobre fondo oscuro. En la actualidad, las páginas y las apps web suelen diseñarse con texto oscuro sobre un fondo claro, una suposición básica que también está codificada en las hojas de estilo de usuario-agente, incluida la de Chrome.
Los días de los CRT quedaron atrás hace mucho tiempo. El consumo y la creación de contenido se trasladaron a los dispositivos móviles que usan pantallas LCD retroiluminadas o pantallas AMOLED que ahorran energía. Las computadoras, las tablets y los smartphones más pequeños y fáciles de transportar generaron nuevos patrones de uso. Las tareas de ocio, como navegar por la Web, programar por diversión y jugar videojuegos de alta gama, suelen realizarse fuera del horario laboral en entornos con poca luz. Las personas incluso disfrutan de sus dispositivos en la cama por la noche. Cuantas más personas usen sus dispositivos en la oscuridad, más popular se volverá la idea de volver a las raíces del claro sobre oscuro.
Por qué usar el modo oscuro
Modo oscuro por razones estéticas
Cuando se les pregunta a las personas por qué les gusta el modo oscuro o por qué lo quieren, la respuesta más popular es que "es más agradable para la vista", seguida de "es elegante y hermoso". Apple, en su documentación para desarrolladores sobre el modo oscuro, escribe explícitamente: "La elección de habilitar una apariencia clara u oscura es estética para la mayoría de los usuarios y podría no relacionarse 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 usan como otra herramienta de accesibilidad, por ejemplo, los usuarios con visión reducida. La primera herramienta de accesibilidad de este tipo que encontré es la función CloseView de System 7, que tenía un botón de activación para Black on White y White on Black. Si bien System 7 admitía el color, la interfaz de usuario predeterminada seguía siendo en blanco y negro.
Estas implementaciones basadas en la inversión demostraron sus debilidades una vez que se introdujo el color. La investigación de usuarios de Szpiro et al. sobre cómo las personas con visión reducida acceden a los dispositivos informáticos demostró 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 del usuario con una función llamada Inversión inteligente, que invierte los colores en la pantalla, excepto en las imágenes, el contenido multimedia y algunas apps que usan estilos de color oscuro.
Una forma especial de visión baja es el síndrome visual informático, también conocido como fatiga visual digital, que se define como "la combinación de problemas oculares y visuales asociados con el uso de computadoras (incluidas computadoras de escritorio, laptops y tablets) y otras pantallas electrónicas (p.ej., smartphones y dispositivos de lectura electrónicos)". Se propuso que el uso de dispositivos electrónicos por parte de los adolescentes, en especial durante la noche, aumenta el riesgo de que tengan una menor duración del sueño, una mayor latencia del inicio del sueño y una mayor deficiencia de sueño. Además, se ha informado ampliamente que la exposición a la luz azul participa en la regulación del ritmo circadiano y el ciclo del sueño, y los entornos de luz irregulares pueden provocar privación del sueño, lo que posiblemente afecte el estado de ánimo y el rendimiento en las tareas, según la investigación de Rosenfield. Para limitar estos efectos negativos, puede ser útil reducir la luz azul ajustando la temperatura del color de la pantalla con funciones como Night Shift de iOS o Luz nocturna de Android, así como evitar las luces brillantes o irregulares en general con temas oscuros o modos oscuros.
Ahorro de energía del modo oscuro en pantallas AMOLED
Por último, se sabe que el modo oscuro ahorra mucha energía en las pantallas AMOLED. Los casos de éxito de Android que se enfocaron en apps populares de Google, como YouTube, demostraron que el ahorro de energía puede alcanzar el 60%. En el siguiente video, se proporcionan más detalles sobre estos casos de éxito y el ahorro de energía por app.
Cómo activar el modo oscuro en el sistema operativo
Ahora que expliqué por qué el modo oscuro es tan importante para muchos usuarios, veamos cómo puedes admitirlo.
Los sistemas operativos que admiten un modo oscuro o un tema oscuro suelen tener una opción para activarlo en algún lugar de la configuración. En macOS X, se encuentra en la sección General de las preferencias del sistema y se llama Apariencia (captura de pantalla), y en Windows 10, se encuentra en la sección Colores y se llama Elige tu color (captura de pantalla). En Android Q, puedes encontrarlo en Pantalla como un interruptor de Tema oscuro (captura de pantalla), y en iOS 13, puedes cambiar la Apariencia en la sección Pantalla y brillo de la configuración (captura de pantalla).
La consulta de medios prefers-color-scheme
Una última teoría antes de comenzar.
Las consultas de medios permiten que los autores prueben y consulten valores o funciones del agente de usuario o del dispositivo de visualización, independientemente del documento que se renderice.
Se usan en la regla @media de CSS para aplicar estilos de forma condicional a un documento, y en otros contextos y lenguajes, como HTML y JavaScript.
Media Queries Level 5 introduce las llamadas funciones de medios de preferencia del usuario, es decir, una forma para que los sitios detecten la forma preferida del usuario para mostrar el contenido.
La función de medios prefers-color-scheme se usa 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 un fondo claro).dark: Indica que el usuario notificó al sistema que prefiere una página con un tema oscuro (texto claro sobre un 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, puedes 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 verifico si la consulta de medios coincide.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
En el momento de escribir este artículo, prefers-color-scheme es compatible con Chrome y Edge a partir de la versión 76, Firefox a partir de la versión 67 y Safari a partir de la versión 12.1 en macOS y de la versión 13 en iOS, tanto en computadoras como en dispositivos móviles (cuando está disponible).
Para todos los demás navegadores, puedes consultar el documento Tablas de compatibilidad de Can I use.
Aprender 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 color del usuario de forma opcional en el momento de la solicitud, lo que permite que los servidores inserten el CSS correcto y, por lo tanto, eviten un destello del tema de color incorrecto.
Modo oscuro en la práctica
Por último, veamos cómo se ve en la práctica la compatibilidad con el modo oscuro. Al igual que con Highlander, con el modo oscuro solo puede haber uno: oscuro o claro, pero nunca ambos. ¿Por qué menciono esto? Esto se debe a que este hecho debería tener un impacto en la estrategia de carga. No obligues a los usuarios a descargar CSS en la ruta de renderización crítica que corresponde a un modo que no usan actualmente. Por lo tanto, para optimizar la velocidad de carga, dividí mi CSS para la app de ejemplo que muestra las siguientes recomendaciones en la práctica en tres partes para aplazar el CSS no crítico:
style.cssque contiene reglas genéricas que se usan de forma universal en el sitio.dark.cssque contiene solo las reglas necesarias para el modo oscuro.light.cssque contiene solo las reglas necesarias para el modo claro.
Estrategia de carga
Los dos últimos, light.css y dark.css, se cargan de forma condicional con una consulta <link media>.
Inicialmente, no todos los navegadores admitirán prefers-color-scheme (detectable con el patrón anterior), lo que manejo de forma dinámica cargando el archivo light.css predeterminado a través de un elemento <link rel="stylesheet"> insertado de forma condicional en una secuencia de comandos intercalada minúscula (light es una elección arbitraria, también podría haber hecho que dark fuera la experiencia de resguardo predeterminada).
Para evitar un destello de contenido sin aplicar estilos, 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
Aprovecho al máximo las variables de CSS, lo que permite que mi style.css genérico sea, bueno, genérico, y toda la personalización del modo claro o oscuro se realiza en los otros dos archivos dark.css y light.css.
A continuación, puedes 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 referencia 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, luego uso estas variables en la regla body { … }.
Como se definen en la seudoclase CSS :root (un selector que en HTML representa el elemento <html> y es idéntico al selector html, excepto que su especificidad es mayor), se aplican en cascada, lo que me sirve para declarar variables 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, probablemente notaste una propiedad color-scheme con el valor light dark separado por espacios.
Esto le indica al navegador qué temas de color admite mi app y le permite activar variantes especiales de la hoja de estilo del usuario-agente, lo que resulta útil, por ejemplo, para permitir que el navegador renderice campos de formulario con un fondo oscuro y texto claro, ajuste las barras de desplazamiento o habilite un color de resaltado compatible con el tema.
Los detalles exactos de color-scheme se especifican en el Módulo de ajuste de color de CSS, nivel 1.
Todo lo demás es solo cuestión de definir variables CSS para los elementos importantes de mi sitio.
Organizar los estilos de forma semántica ayuda mucho cuando se trabaja con el modo oscuro.
Por ejemplo, en lugar de --highlight-yellow, considera llamar a la variable --accent-color, ya que "amarillo" podría no ser 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 y observa cómo reacciona la página.
Cargando impacto
Cuando juegas con este ejemplo, puedes ver por qué cargo mis dark.css y light.css a través de consultas de medios.
Intenta activar el modo oscuro y volver a cargar la página: Las hojas de estilo particulares que no coinciden actualmente se siguen cargando, pero con la prioridad más baja, de modo que nunca compitan con los recursos que el sitio necesita en este momento.
prefers-color-scheme carga el CSS del modo oscuro con la prioridad más baja.Cómo reaccionar a los cambios del modo oscuro
Al igual que cualquier otro cambio en la consulta de medios, los cambios en el modo oscuro se pueden suscribir a través de JavaScript.
Puedes usarlo, por ejemplo, para cambiar de forma dinámica el favicon de una página o el <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 favicon, abre la demostración en una pestaña separada.
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, puedes ajustar el color según una consulta de medios con el atributo media del elemento de color del tema meta. Se elegirá la primera que coincida. Por ejemplo, podrías tener un color para el modo claro y otro para el modo oscuro. Al momento de escribir este artículo, no puedes definir esos elementos en tu manifiesto. Consulta el problema 975 de w3c/manifest en GitHub.
<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
Cómo emular prefers-color-scheme en Herramientas para desarrolladores
Cambiar el esquema de color de todo el sistema operativo puede ser molesto rápidamente, por lo que las Herramientas para desarrolladores de Chrome ahora te permiten emular el esquema de color preferido del usuario de una manera que solo afecta a la pestaña visible actualmente.
Abre el menú de comandos, comienza a escribir Rendering, ejecuta el comando Show Rendering y, luego, cambia la opción Emular prefers-color-scheme de la función de medios de CSS.
Cómo hacer capturas 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 del protocolo de DevTools.
Con dark-mode-screenshot, proporcionamos una secuencia de comandos de Puppeteer que te permite crear capturas de pantalla de tus páginas en los modos claro y oscuro.
Puedes ejecutar esta secuencia de comandos una sola vez o, como alternativa, incluirlo en 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 tal vez notaste es que no uso el blanco puro.
En cambio, para evitar el resplandor y el sangrado contra el contenido oscuro circundante, elijo un blanco ligeramente más oscuro. Algo como rgb(250, 250, 250) funciona bien.
Vuelve a colorear y oscurecer imágenes fotográficas
Si comparas las dos capturas de pantalla que se muestran a continuación, notarás que no solo cambió el tema principal de oscuro sobre claro a claro sobre oscuro, sino que la imagen de héroe también se ve un poco diferente. Mi investigación de usuarios demostró que la mayoría de las personas encuestadas prefieren imágenes un poco menos brillantes y vibrantes cuando el modo oscuro está activo. Me refiero a esto como recoloración.
El cambio de color 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 su URL. La idea es que puedo darles a los gráficos vectoriales (íconos) un tratamiento de cambio de color diferente al de mis imágenes (fotos). Obtén más información sobre esto en el próximo párrafo.
Observa cómo vuelvo a usar una variable CSS para poder cambiar mi filtro de forma flexible más adelante.
Como el cambio de color 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);
}
Cómo personalizar las intensidades de cambio de color del modo oscuro con JavaScript
No todas las personas son iguales y tienen diferentes necesidades de modo oscuro.
Si me atengo al método de cambio de color descrito anteriormente, puedo convertir fácilmente la intensidad de la escala de grises en una preferencia del usuario que puedo cambiar con JavaScript y, si establezco un valor de 0%, también puedo inhabilitar el cambio de color por completo.
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 con la pseudoclase :root de CSS.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Cómo invertir gráficos vectoriales e íconos
Para los gráficos vectoriales, que en mi caso se usan como íconos a los que hago referencia a través de elementos <img>, uso un método de cambio de color diferente.
Si bien la investigación demostró que a las personas no les gusta la inversión de colores en las fotos, sí funciona muy bien para la mayoría de los íconos.
Nuevamente, uso variables CSS para determinar la cantidad de inversión en el estado normal y en el estado :hover.
Observa cómo vuelvo a invertir solo los íconos en dark.css, pero no en light.css, y cómo :hover obtiene una intensidad de inversión diferente en los dos casos para que el ícono aparezca ligeramente más oscuro o más claro, 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 imágenes SVG intercaladas
Para las imágenes SVG intercaladas, en lugar de usar filtros de inversión, puedes aprovechar la palabra clave currentColor 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.
Convenientemente, si currentColor se usa como el valor de los atributos fill o stroke de SVG, en su lugar, 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á aplicando en contexto.
Ten en cuenta que esto solo funciona para los SVG incorporados o <use href="…">, pero no para los SVG a los que se hace referencia como el src de una imagen o de alguna manera a través de CSS.
Puedes ver cómo se aplica en la siguiente demostración.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
Transiciones fluidas entre modos
El cambio del modo oscuro al modo claro o viceversa puede ser fluido gracias a que tanto color como background-color son propiedades CSS animables.
Crear la animación es tan fácil como declarar dos transitions para las dos propiedades.
En el siguiente ejemplo, se ilustra la idea general. Puedes probarla 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 arte con modo oscuro
Si bien, en general, recomiendo trabajar exclusivamente con prefers-color-scheme en el atributo media de los elementos <link> (en lugar de hacerlo de forma intercalada en las hojas de estilo) por motivos de rendimiento de carga, hay situaciones en las que es posible que desees trabajar con prefers-color-scheme directamente intercalado en tu código HTML.
La dirección de arte es una de esas situaciones.
En la Web, la dirección de arte se ocupa de la apariencia visual general de una página y de 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, el diseñador debe decidir qué imagen es la mejor en un modo en particular y si la recoloración de imágenes tal vez no es 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 especifica ninguna preferencia, y se establece el hemisferio oriental como predeterminado en todos los demás casos.
Por supuesto, esto es solo con fines ilustrativos.
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 agrega una opción de inhabilitación
Como se mencionó en la sección por qué usar el modo oscuro anterior, el modo oscuro es una elección estética para la mayoría de los usuarios.
En consecuencia, es posible que a algunos usuarios les guste tener la IU del sistema operativo en modo oscuro, pero prefieran ver sus páginas web de la forma en que están acostumbrados a verlas.
Un excelente patrón es cumplir inicialmente con el indicador que envía el navegador a través de prefers-color-scheme, pero luego permitir de forma opcional que los usuarios anulen su configuración a nivel del sistema.
El elemento personalizado <dark-mode-toggle>
Por supuesto, puedes crear el código por tu cuenta, pero también puedes usar un elemento personalizado (componente web) ya preparado que creé para este propósito.
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) a tu página que puedes personalizar por completo.
En la siguiente demostración, se muestra el elemento en acción (y también lo 🤫 incluí 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.
Intenta hacer clic o presionar los controles del modo oscuro en la esquina superior derecha de la siguiente demostración. Si marcas la casilla de verificación en el tercer y cuarto control, observa cómo se recuerda tu selección de modo incluso cuando vuelves a cargar la página. Esto permite que los visitantes mantengan su sistema operativo en modo oscuro, pero disfruten de tu sitio en modo claro o viceversa.
Conclusiones
Trabajar con el modo oscuro y admitirlo es divertido y abre nuevas vías de diseño.
Para algunos de tus visitantes, puede ser la diferencia entre no poder usar tu sitio y ser un usuario satisfecho.
Existen algunos inconvenientes y, sin duda, se requiere realizar pruebas exhaustivas, pero el modo oscuro es una excelente oportunidad para demostrar que te preocupas por todos tus usuarios.
Las prácticas recomendadas que se mencionan en esta entrada del blog y los asistentes, como el elemento personalizado <dark-mode-toggle>, deberían darte la confianza necesaria para crear una experiencia increíble en el modo oscuro.
Avísame en Twitter qué creas y si esta publicación te resultó útil, o bien haz sugerencias para mejorarla.
¡Gracias por leer esta información! 🌒
Vínculos relacionados
Recursos para la búsqueda de medios prefers-color-scheme:
Recursos para la metaetiqueta color-scheme y la propiedad CSS:
- La propiedad
color-schemede CSS y la metaetiqueta - Página Estado de la plataforma de Chrome
- Error de Chromium
- Especificación de nivel 1 del módulo de ajuste de color de CSS
- Problema de GitHub del GT de CSS para la etiqueta meta y la propiedad CSS
- Error de GitHub de WHATWG de HTML para la etiqueta meta
Vínculos generales del modo oscuro:
- Material Design: Tema oscuro
- Modo oscuro en el Inspector web
- Compatibilidad con el modo oscuro en WebKit
- Pautas de la interfaz humana de Apple: Modo oscuro
Artículos de investigación de antecedentes para esta publicación:
- ¿Qué hace realmente el parámetro "supported-color-schemes" del modo oscuro? 🤔
- ¡Que se haga la oscuridad! 🌚 Tal vez…
- Recoloración para el modo oscuro
Agradecimientos
La función de medios prefers-color-scheme, la propiedad 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 CSS Color Adjustment Module Level 1.
Quiero agradecer 🙏 a Lukasz Zbylut,
Rowan Merewood,
Chirag Desai y Rob Dodson por sus revisiones exhaustivas de este artículo.
La estrategia de carga es una creación de Jake Archibald.
Emilio Cobos Álvarez me indicó el método de detección de prefers-color-scheme correcto.
La sugerencia con los SVG y currentColor a los que se hace referencia provino de Timothy Hatcher.
Por último, agradezco a los muchos participantes anónimos de los diversos estudios de usuarios que ayudaron a dar forma a las recomendaciones de este artículo.