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

Chrome 150, Firefox 150 (beide 2026); Safari für beides ausstehend.

Chrome 150Edge 150Safari noFirefox 150

`color-mix()` nimmt jetzt beliebig viele Farben mit Gewichten, und `light-dark()` akzeptiert Bilder/Verläufe, sodass ein Hero-Hintergrund oder Icon mit dem Farbschema in einer Deklaration wechseln kann.

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: Die einfache `background`-Zeile über der light-dark()-Zeile und ein Zweifarben-color-mix() halten Safari korrekt.

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

Prompt

Wo ein Verlauf oder Bild mit dem Theme wechseln muss, nutze `background: light-dark(<light image>, <dark image>)` unter `color-scheme: light dark`, mit einer einfachen Fallback-Deklaration für Safari davor. Für gemischte Markenfarben akzeptiert `color-mix(in oklch, a 40%, b 40%, c 20%)` in Chrome/Firefox 150+ mehr als zwei Eingaben.