light-dark()

Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Valores de imagem em light-dark() são mais recentes (Chrome 150, Firefox 150).

Chrome 123Edge 123Safari 17.5Firefox 120

Escolhe uma de duas cores dependendo do `color-scheme` do elemento. Junto com `color-scheme: light dark` entrega um dark mode completo com uma declaração por token, sem duplicar media queries.

Follows the OS theme.

CSS

.fx-009{
  color-scheme:light dark;
  --bg:light-dark(#fff,#111);--fg:light-dark(#111,#eee);--accent:light-dark(#2563eb,#60a5fa);
  background:#fff;background:var(--bg);color:#111;color:var(--fg);padding:16px;border-radius:10px;font-family:system-ui;
}
.fx-009 button{background:#2563eb;background:var(--accent);color:#fff;color:var(--bg);border:0;padding:8px 14px;border-radius:6px}
.fx-009 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-009"><p>Follows the OS theme.</p><button>Action</button></div>

Fallback: Navegadores sem suporte ignoram os valores light-dark() e mantêm as cores claras simples declaradas logo antes de cada var().

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

Prompt

Implemente temas com `color-scheme: light dark` em `:root` e cada token de cor escrito como `light-dark(valorClaro, valorEscuro)`. Não duplique blocos de tokens dentro de `@media (prefers-color-scheme)`. Para forçar um tema numa subárvore, defina `color-scheme: dark` ali; light-dark() acompanha automaticamente.