Sin dos versiones ni filtros CSS: los colores dinámicos de OIM recalculan la paleta de la imagen al modo claro u oscuro de la página que la muestra, en vivo. Así se resuelve el problema de las imágenes que no se adaptan al modo oscuro.
Abre una web en modo oscuro y fíjate en las imágenes. Todo lo demás se ha adaptado: el fondo, los textos, los botones. Pero el gráfico de la portada sigue siendo un rectángulo blanco que deslumbra en mitad de la pantalla. La imagen se hizo para un fondo claro y no sabe hacer otra cosa.
Hoy hay dos salidas, y ninguna es buena. Una es preparar dos versiones de cada imagen, una clara y otra oscura, y mantenerlas siempre a la par. La otra es invertir los colores por código, que deja los logotipos de otro color y las caras de un tono extraño.
Colores con nombre, no con número
En un diseño normal, cada forma tiene un color fijo: este azul, ese blanco. En OIM el diseñador puede, además, darle a cada color un papel: «fondo», «texto», «acento». Es lo mismo que hace cualquier sistema de diseño en una web, llevado dentro de la imagen.
Hay ocho papeles universales: primary, on-primary, secondary, on-secondary, surface, on-surface, outline y accent. Cada uno corresponde a una variable CSS, como --oim-color-primary. Cada papel viaja junto con el color original del diseñador, que sirve de respaldo.
Un ejemplo: el gráfico de portada
Imagina el gráfico de portada de un medio. El diseñador asigna el papel surface al fondo de la tarjeta, on-surface al título y accent al resaltado de la cifra principal. El color original, por ejemplo blanco para el fondo, queda guardado como respaldo.
La página define sus propias variables. En modo claro, surface es blanco y accent un ámbar. En modo oscuro, surface pasa a un gris oscuro y accent a un tono más claro. El mismo archivo se ve bien en las dos situaciones:
:root {
--oim-color-surface: #ffffff;
--oim-color-on-surface: #0f172a;
--oim-color-accent: #f59e0b;
}
[data-theme="dark"] {
--oim-color-surface: #1e293b;
--oim-color-on-surface: #f8fafc;
--oim-color-accent: #fbbf24;
}
Nadie ha tocado el archivo. Solo cambian las variables de la página.
La imagen se viste para cada lector
Cuando la imagen se muestra, el color de cada papel sale de las paletas que lleva el propio archivo. El player sigue el tema del sistema del lector. Con modo oscuro usa la paleta llamada «dark» del archivo; con modo claro, la llamada «light». Si el archivo no tiene esa paleta, usa su paleta por defecto. Un atributo palette en el elemento tiene prioridad, y allow-dynamic-colors="false" lo desactiva.
Solo cambian los colores que tienen un papel asignado. Las fotos, los degradados y todo lo que el diseñador dejó fijo se quedan como estaban, así que los colores de marca no se estropean.
Si una imagen debe conservar sus colores aunque la página tenga sus propias variables, el atributo allow-dynamic-colors="false" ignora esas variables y usa el color original de cada elemento.
Más allá del modo oscuro
Lo mismo sirve para otras cosas. Una agencia puede preparar una infografía una sola vez y entregarla con la paleta de cada cliente, siempre que cada web defina sus variables. Un medio puede usar la misma pieza en su web y en la de un socio, cada una con sus colores, sin rehacer nada.
Las páginas aprendieron hace años a adaptarse al lector. Ahora las imágenes también pueden.
Otro caso: la documentación con dos temas
Una web de documentación técnica tiene un diagrama de arquitectura. En modo claro, los bloques son claros y las flechas oscuras; en modo oscuro, al revés. Con los papeles de color, el diagrama conserva el contraste en los dos temas. El diseñador no tiene que preparar un segundo diagrama, y el equipo de documentación no tiene que recordar actualizar dos archivos cada vez que cambia una flecha.
Seguridad: un color no puede traer código
Un color que llega dentro de un archivo viene de un tercero. Si se pegara tal cual en el estilo de la página, alguien podría esconder en él una instrucción CSS que hiciera una petición a otro servidor. Por eso el visor solo acepta colores de una lista blanca: valores hexadecimales, rgb(), hsl(), palabras como transparent y referencias a variables. Cualquier otra cosa se descarta.
Cómo empezar
- En el editor de OIM, asigna un papel a cada color que deba cambiar con el tema.
- Define las variables
--oim-color-*en la hoja de estilos de tu página, con valores para el modo claro y el oscuro. - Declara la imagen. Los colores dinámicos están activos por defecto:
<oim-player src="grafico-portada.oim.png" lang="es"></oim-player>
La referencia completa de tokens y atributos está en la guía de colores dinámicos. Si empiezas desde cero, sigue el inicio rápido.
Preguntas frecuentes
¿Qué pasa con las imágenes sin papeles de color?
Se muestran con sus colores fijos. El visor no las cambia, aunque la página defina variables.
¿Cómo evito que la web tiña una imagen de marca?
Pon allow-dynamic-colors="false" en el elemento. La imagen ignora las variables de la página y conserva el color del diseñador.
¿Un color malicioso dentro del archivo puede cargar algo externo?
No. Los colores pasan por una lista blanca, y los valores con url(), llaves o comillas se descartan.
¿Necesito dos archivos para modo claro y oscuro?
No. Un solo archivo sirve para los dos temas. Lo que cambia son las variables que define la página.
Otras lecturas
- Qué es un .oim: la imagen interactiva en un PNG, para entender qué guarda el archivo además de los píxeles.
- Imágenes interactivas sin JavaScript ni iframes, para ver cómo responde la misma imagen al cursor.