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

Chrome 150, Firefox 150 (ambos em 2026); Safari pendente para os dois.

Chrome 150Edge 150Safari noFirefox 150

`color-mix()` agora aceita qualquer número de cores com pesos, e `light-dark()` aceita imagens/gradientes, então um fundo de hero ou ícone pode trocar com o esquema de cores numa única declaração.

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: A linha `background` simples acima da light-dark() e um color-mix() de duas cores mantêm o Safari correto.

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

Prompt

Onde um gradiente ou imagem precisar mudar com o tema, use `background: light-dark(<imagem clara>, <imagem escura>)` sob `color-scheme: light dark`, precedido de uma declaração de fallback simples para o Safari. Para cores de marca mescladas, `color-mix(in oklch, a 40%, b 40%, c 20%)` aceita mais de duas entradas no Chrome/Firefox 150+.