Las seis etapas del modo oscuro (2024)

• Desde funciones nativas del navegador hasta media queries de JavaScript, se organiza una clasificación gradual de 8 niveles para ampliar progresivamente el alcance de implementación del modo oscuro
• La forma más simple consiste en seguir la preferencia de esquema de color del usuario solo con declarar <meta name="color-scheme" content="light dark"> o color-scheme: light dark
• En niveles más altos, la función light-dark(), @media (prefers-color-scheme: dark) y hojas de estilo separadas por esquema permiten ajustar ampliamente no solo colores, sino también imágenes y sombras
• También es posible crear un selector que no dependa solo de la configuración del sistema del usuario y ofrezca tres opciones: Automático, light y dark; además, se puede determinar el tema con :has() y el elemento meta real
• Incluye las limitaciones de accesibilidad de Safari y observaciones sobre el comportamiento de prefers-color-scheme al imprimir, mostrando que con funciones recientes de CSS ya es fácil incorporar modos claro y oscuro

---

Implementación del modo oscuro por niveles

• Level 1: Barebone

  • Incluso sin una sola línea de CSS se puede activar la distinción entre light/dark, y con solo añadir <meta name="color-scheme" content="light dark"> en el head del documento el navegador empieza a seguir la preferencia de esquema de color del usuario
  • En teoría, el orden de los elementos del atributo content tiene significado, y los usuarios que no hayan indicado una preferencia de esquema de color reciben el primer valor de la lista separada por espacios
  • Como la configuración actual de los sistemas operativos no ofrece una opción para no elegir esquema de color, en la práctica esto termina coincidiendo con el esquema configurado en el sistema operativo
  • También se puede indicar un solo valor en content; en ese caso se fuerza ese esquema sin considerar la preferencia del usuario
  • Esta etiqueta meta cumple en cierta medida el papel de una vía del lado de HTML equivalente al enfoque CSS de la siguiente etapa

• Level 2: Basic

  • En CSS, se puede aplicar la distinción entre modo claro/oscuro con la declaración html { color-scheme: light dark; }
  • Si ya existe una etiqueta meta en el DOM, esta declaración no es necesaria; si se puede controlar el HTML, se recomienda usar la meta etiqueta para que el navegador conozca la instrucción antes de parsear el CSS
  • Ambos métodos permiten aprovechar los estilos predeterminados del user agent y el modo claro/oscuro incluido en ellos
  • Si además se añade CSS, pero limitándose principalmente al uso de CSS system colors, es posible lograr un diseño bastante ordenado
  • A diferencia de la meta etiqueta, que siempre se aplica a todo el documento, la declaración CSS color-scheme también puede establecerse fuera del elemento raíz, lo que abre espacio para usos adicionales

• Level 3: Benign

  • Con la función de color light-dark() de CSS, añadida relativamente hace poco, se pueden hacer ajustes simples de modo claro/oscuro
  • En el ejemplo se usa como background-color: light-dark(black, white); y color: light-dark(white, black);; el primer argumento se aplica en modo claro y el segundo en modo oscuro
  • En los argumentos se pueden poner colores directamente o custom properties que se interpreten como color
  • En todo el artículo, esta es la única etapa que, al momento de escribirse, todavía no tiene suficiente soporte de navegadores

• Level 4: Bold

  • Se puede implementar el cambio a modo oscuro con la media query tradicional @media (prefers-color-scheme: dark)
  • Ya sea consultando light o dark, permite el máximo nivel de personalización, no limitado a simples cambios de color
  • También permite ajustes como desaturar imágenes con filtros en modo oscuro o reemplazar sombras de cajas por contornos

• Level 5: Bisectional

  • Las media queries también pueden usarse en HTML, colocándolas en el atributo media de un elemento link para separar hojas de estilo por esquema
  • Como ejemplo, se propone conectar light.css y dark.css respectivamente a prefers-color-scheme: light y prefers-color-scheme: dark
  • Cuando el alcance de personalización es grande, una configuración con archivos dedicados resulta adecuada, y el navegador puede ignorar el archivo CSS que no coincida con la consulta, reduciendo en uno los archivos a descargar

• Level 6: Ballistic

  • En JavaScript, se puede usar la media query de esquema de color con window.matchMedia('(prefers-color-scheme:dark)')
  • Igual que con otras media queries, se puede consultar si el esquema es claro u oscuro y realizar el procesamiento deseado en función del resultado
  • En una implementación real, no hace falta ceñirse a una sola técnica de las etapas anteriores, sino que se pueden combinar

Selector del usuario y patrones avanzados

• Level 7: Beyond

  • No es necesario depender solo de la preferencia del sistema del usuario; también se puede construir un selector de esquema de color
  • Este selector no es un simple booleano, ya que necesita un modo Automático como valor inicial por defecto que siga prefers-color-scheme
  • Si se añade ese selector encima, el usuario puede elegir entre tres modos: Automático, light y dark

• Level 8: Beguiling

  • Al implementar el selector de Level 7, normalmente se suele añadir una clase .dark o un atributo como data-theme="dark" al elemento HTML
  • En su lugar, se puede usar :has() para consultar directamente si existe <meta name="color-scheme" content="dark">
  • En el ejemplo, bajo el selector html:has(meta[name="color-scheme"][content="dark"]) se configuran variables CSS como --color-bg y --color-text con valores del modo oscuro
  • Así es posible determinar el tema a partir del elemento meta real sin necesidad de clases ni atributos de datos adicionales

Debate adicional y observaciones

• Observación en CSS Naked Day

  • Tras eliminar los estilos, en casi todos los sitios visitados se hizo evidente la ausencia de modo oscuro, y eso llevó a distinguir las etapas del modo oscuro
  • También se menciona que, al construir un sitio nuevo desde cero y escribir estilos nuevos, con las funciones recientes de CSS resulta muy fácil incorporar de base modos claro y oscuro

• Problemas de accesibilidad en Safari

  • Se señala que hasta hace relativamente poco Safari no ofrecía colores de enlaces accesibles en modo oscuro
  • Se menciona la experiencia de haber detectado ese problema en un CSS Naked Day anterior, retirando la meta etiqueta y usando solo el esquema claro
  • Después se volvió a añadir la meta etiqueta, pero reconociendo que en usuarios de versiones antiguas de Safari podría haber una degradación de accesibilidad
  • También se confirma la ausencia de bordes visibles en cuadros de texto dentro del modo oscuro de Safari
  • Como los estilos del user agent por sí solos no garantizan accesibilidad completa incluso usando HTML semántico correcto, se plantea mantener suficiente estilo también en futuros CSS Naked Day

• Impresión y la condición screen and

  • Se menciona que en el ejemplo Bisectional se usó screen and ... con la intención de excluir impresoras como destino
  • Suponiendo que exista una hoja de estilos base independiente del tema o una hoja de impresión dedicada, se plantea separarlo por seguridad porque el modo oscuro en impresoras podría gastar mucha tinta
  • En pruebas reales, incluso imprimiendo con el modo oscuro del sistema activado, solo salieron texto negro y papel blanco, observándose que los navegadores no aplican esos estilos oscuros al imprimir
  • En pruebas adicionales, en la vista previa de impresión prefers-color-scheme siempre se reportó como light, confirmado en Firefox y Chromium
  • Se incluye un comentario en tono de broma sobre que sería una lástima tener una impresora que use papel negro y tinta blanca

[GN⁺]

Comentarios de Hacker News

• Si vas a hacer mucha personalización, tener un archivo dedicado suena razonable, pero creo que la explicación de que el CSS que no coincide con la media query ni siquiera se descarga no refleja cómo se comportan realmente los navegadores. En mi experiencia, el navegador igual lo descarga todo y solo le da distinta prioridad
• Me preguntaba si todavía no existe una forma de evitar esos destellos tipo flashbang que aparecen mientras se espera el contenido inicial del servidor
  • A mí me parece que definir background-color en userContent.css de Firefox funciona bastante bien
  • Yo simplemente bajé el brillo de la pantalla y desactivé el modo oscuro, y así desapareció el flashbang. De paso, la batería también dura más
• Yo pensé que este artículo iba a tratar sobre las preferencias respecto al nivel de negro del fondo en modo oscuro. También he oído que el negro puro es mejor para la batería en OLED, y conozco gente que prefiere un gris menos entintado antes que un negro absoluto. Aun así, no estoy seguro de que hagan falta seis niveles; siento que, como mucho, se distinguen 3 o 4 niveles de forma perceptible
  • Yo pensaba que una solución más general sería estandarizar la compatibilidad con Reader Mode. En vez del problema n x m de que cada sitio intente ajustarse a todas las preferencias de todos los usuarios, me parece mejor una estructura donde el sitio solo ofrezca una vista simple del contenido y el navegador se encargue de las preferencias de cada usuario encima de eso
  • Yo prefiero el negro puro en OLED. Siento que mientras menos píxeles estén encendidos, menor es la carga de burn-in y, como de todos modos la vida útil es limitada, a largo plazo preferiría usar el monitor más de 5 años en vez de solo 2 o 3 años
• Para mí el mejor nivel es 9, o si no 0, que básicamente es apagar la computadora e irse a dormir
• Me alegró ver que el OP implementó bien un toggle de 3 estados
• Me habría parecido más divertido si los niveles se aplicaran dinámicamente mientras uno va bajando con el scroll
  • O si no, también estaría bien que el lector pudiera elegir el nivel por su cuenta en puntos adecuados de la página
• A mí me parece que son 8 niveles, ¿no?
• Esto sí se sintió muy 2024
• Lo primero que se me vino a la cabeza en esta situación fue, por supuesto, xkcd 3227