Imágenes y contenido multimedia en modo oscuro

El tema oscuro del panel salió en buena forma: una página casi negra, pasos de superficie ordenados, texto blanco roto, contraste comprobado de principio a fin. Luego se cargó el contenido. Cada gráfico era una captura de pantalla con fondo de trazado blanco, las fotos de producto estaban tomadas sobre blanco y el panel de ayuda incrustaba un vídeo con una miniatura blanca. De noche, la interfaz se leía como una fila de ventanas iluminadas en una pared oscura: el tema era oscuro; la página no.

Las imágenes son la parte de la página que un tema no puede recolorear: fotografías, capturas de pantalla e incrustaciones conservan sus propios píxeles en ambos modos. Sin tratar, una imagen con fondo blanco se convierte en el objeto más brillante de una interfaz oscura por un amplio margen: contra una página casi negra se sitúa en torno a 20:1, más brillante que cualquier texto del tema. Las respuestas que funcionan, más o menos por orden de coste: atenúa ligeramente el contenido multimedia en modo oscuro, sirve variantes oscuras de los gráficos que te pertenecen, dibuja iconos y diagramas en currentColor y enmarca con paspartú lo que quede dentro de un marco. La paleta en la que viven esas soluciones —el ancla, las superficies, los valores de texto— es el tema de nuestra guía de modo oscuro; este artículo trata de los píxeles que esa paleta no puede alcanzar.

¿Por qué las imágenes brillantes arruinan un tema oscuro?

Porque el ojo se adapta continuamente a lo más brillante que ve. La visión se ajusta a la luminancia media del campo visual, y un tema oscuro funciona manteniendo esa media baja: el texto de luminancia moderada se lee con claridad porque todo el campo coincide en lo oscuro que es el mundo. Un rectángulo brillante rompe ese acuerdo: la adaptación se reajusta hacia la imagen y todo lo que la rodea se vuelve turbio. La imagen no se limita a estar en la página; recalibra la página a su alrededor.

Los números muestran lo desequilibrado que es. Contra una página en L ≈0,15 —≈#070B14— un campo de imagen blanco mide ≈20:1, mientras que el texto de cuerpo más brillante del propio tema ronda ≈15:1. La captura de pantalla supera en contraste a cada titular de la pantalla, y la atención sigue al contraste, merezca o no el contenido.

¿Hay que atenuar las imágenes en modo oscuro?

Una atenuación ligera es la solución eficaz más barata, y es una sola regla:

@media (prefers-color-scheme: dark) {
  .content img,
  .content video {
    filter: brightness(0.85);
  }
}

Un multiplicador de ≈0,85 lleva un campo de imagen blanco de ≈20:1 a ≈14:1 contra la misma página: al registro del propio texto brillante del tema en lugar de por encima de él. La imagen deja de ser el objeto más ruidoso de la pantalla, y la mayoría de las fotografías sobreviven al cambio sin daño visible.

La advertencia es la fidelidad. El filtro multiplica cada canal, así que atenúa el producto junto con su fondo, y el color de un tejido o una muestra de pintura que se vende por su exactitud debería atenuarse con suavidad (clase 0,9) o nada en absoluto. La atenuación es un instrumento tosco: no sabe qué muestra la imagen, solo lo brillante que es. Se gana su lugar como tratamiento por defecto para las imágenes de contenido, con excepciones declaradas allí donde el color es la mercancía.

¿Cómo se sirve una imagen distinta según el tema?

Para los elementos gráficos que te pertenecen —logotipos, ilustraciones, gráficas— la respuesta robusta es entregar dos recursos y dejar que el navegador elija:

<picture>
  <source srcset="revenue-chart-dark.svg"
          media="(prefers-color-scheme: dark)">
  <img src="revenue-chart-light.svg" alt="Revenue by quarter">
</picture>

La media query del elemento <source> selecciona la variante oscura siempre que el sistema del usuario la pida; el <img> sigue siendo el respaldo en todos los demás casos. El comportamiento completo del elemento está documentado en la referencia de picture de MDN.

El coste es honesto: dos recursos que producir y mantener sincronizados, para siempre. Vale la pena pagarlo por los elementos gráficos que portan significado, y la variante oscura debería diseñarse para el fondo oscuro, no generarse a partir del claro: fondos transparentes o con el color del tema, y colores elegidos para el casi negro igual que se hizo con el resto de la paleta oscura.

¿Cuándo lo resuelve currentColor?

Para iconos y diagramas de un solo color, la respuesta amigable con los tokens es dejar de enviar color en el recurso por completo. Un SVG en línea dibujado con fill="currentColor" o stroke="currentColor" hereda el color de texto CSS de su contexto, lo que significa que hereda el token de texto semántico, lo que significa que se re-tematiza en el momento en que cambia el tema, sin un segundo recurso y sin filtro. Flechas, glifos de estado, ilustraciones de línea de estado vacío y diagramas de arquitectura sencillos pueden viajar todos por esta vía.

El límite está en el nombre: un color. La técnica cubre gráficos que son dibujos de líneas, no fotos de cosas; en el momento en que un recurso necesita su propia paleta, asciende al tratamiento con <picture> de arriba.

¿Qué es el patrón de marco?

Cierto brillo no se puede atenuar ni reemplazar: fotos subidas por los usuarios, miniaturas de terceros, la gráfica que debe seguir siendo blanca por fidelidad. El movimiento que queda es cambiar lo que ese brillo significa. Una analogía útil es la pared de galería: una fotografía blanca sobre una pared oscura nunca se cuelga desnuda; recibe un paspartú y un marco, y el paspartú negocia entre la copia brillante y la sala oscura. El equivalente en la interfaz es colocar el contenido multimedia brillante sobre una superficie elevada con relleno visible: la imagen se lee como contenido presentado en un marco en lugar de como un agujero quemado en el tema.

El marco se construye por completo con la maquinaria que ya tiene la paleta: una superficie elevada un paso por encima de la página (clase L ≈0,19 sobre un ancla en L ≈0,15), un relleno lo bastante amplio como para leerse como deliberado y, opcionalmente, un borde fino del rol de borde. Nada en este flujo de trabajo toca los píxeles de la imagen; el trabajo de la paleta es recibirlos bien. Abre la paleta del marco en Scale Composer: el ancla de página oscura con los valores de superficie elevada y borde de los que se nutre un marco multimedia, y la diferencia de luminosidad entre los pasos medida.

¿Qué no deberías hacer nunca con las imágenes en modo oscuro?

Dos tratamientos se repiten y ambos se leen como un daño. Auto-invertir las fotografías —extendiendo el filter: invert() del tema al contenido multimedia— las convierte en negativos: los cielos se vuelven naranjas, las caras se vuelven cian, y ninguna rotación de tono las rescata del todo. La inversión tiene su lugar para las ilustraciones de línea de negro puro sobre blanco y en ningún otro punto del pipeline de imagen. La atenuación excesiva es el fallo más sutil: empuja el filtro de brillo hacia 0,5 y las imágenes dejan de parecer adaptadas y empiezan a parecer rotas; los lectores juzgan las fotografías contra la memoria, no contra la página, y una foto oscurecida hasta ese punto se lee como un panel averiado más que como una decisión de diseño.

¿Y las capturas de pantalla en la documentación?

La documentación es el caso especial porque las capturas de pantalla son su contenido: página tras página de rectángulos grandes y en su mayoría blancos si el producto se capturó en modo claro. Existen dos opciones honestas. La minuciosa: capturar un conjunto de capturas de pantalla en tema oscuro para la documentación en tema oscuro, de modo que las imágenes concuerden con la página que las rodea, al coste real de duplicar la matriz de captura y mantenimiento. La pragmática: mantener un solo conjunto y aplicar el patrón de marco de forma coherente, de modo que cada captura se apoye sobre un paspartú en una superficie elevada y el brillo se lea como contenido enmarcado. La atenuación del contenedor funciona como solución provisional para las capturas con mucho texto, pero el texto pequeño de la interfaz en las capturas pierde legibilidad rápidamente, así que atenúa las capturas de documentación con más suavidad que las fotografías.

Prepara el escenario para los píxeles que no puedes cambiar

Las imágenes llegarán tan brillantes como sean; lo que un design system controla es el escenario en el que aterrizan. Construye los valores del marco multimedia: los roles de superficie elevada, borde y página que enmarcan el contenido brillante, exportados como tokens junto con el resto del tema oscuro, para que el marco se entregue como sistema y no como improvisación.