color-mix() with many colors + light-dark() for images

Chrome 150, Firefox 150 (ambos en 2026); Safari pendiente en los dos casos.

Chrome 150Edge 150Safari noFirefox 150

`color-mix()` ahora acepta cualquier número de colores con pesos, y `light-dark()` acepta imágenes y gradientes, así que el fondo de un hero o un icono puede cambiar con el esquema de color en una sola declaración.

Scheme-aware gradient

CSS

.fx-044{
  color-scheme:light dark;padding:32px;border-radius:12px;color:light-dark(#111,#fff);font:600 18px system-ui;
  background:linear-gradient(135deg,#dbeafe,#fbcfe8);
  background:light-dark(linear-gradient(135deg,#dbeafe,#fbcfe8),linear-gradient(135deg,#1e3a8a,#831843));
  border:2px solid color-mix(in oklch,#2563eb 40%,#ec4899 40%,#facc15 20%);
}

HTML

<div class="fx-044">Scheme-aware gradient</div>

Fallback: La línea `background` plana encima de la de light-dark() y un color-mix() de dos colores mantienen Safari correcto.

Fuente: developer.chrome.com/release-notes/150 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Prompt

Cuando un gradiente o imagen deba cambiar con el tema, usa `background: light-dark(<imagen clara>, <imagen oscura>)` bajo `color-scheme: light dark`, precedido de una declaración plana de respaldo para Safari. Para colores de marca mezclados, `color-mix(in oklch, a 40%, b 40%, c 20%)` acepta más de dos entradas en Chrome/Firefox 150+.