light-dark()

Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Los valores de imagen en light-dark() son más recientes (Chrome 150, Firefox 150).

Chrome 123Edge 123Safari 17.5Firefox 120

Elige uno de dos colores según el `color-scheme` del elemento. Junto con `color-scheme: light dark` da un modo oscuro completo con una declaración por token, sin 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: Los navegadores sin soporte ignoran los valores light-dark() y se quedan con los colores claros planos declarados justo antes de cada var().

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

Prompt

Implementa los temas con `color-scheme: light dark` en `:root` y cada token de color escrito como `light-dark(valorClaro, valorOscuro)`. No dupliques bloques de tokens dentro de `@media (prefers-color-scheme)`. Para forzar un tema en un subárbol, pon ahí `color-scheme: dark`; light-dark() lo sigue automáticamente.