El problema del modo oscuro tradicional
Tradicionalmente requería reglas CSS duplicadas en @media (prefers-color-scheme: dark). light-dark() elimina esta duplicación.
La función light-dark()
Acepta dos colores y retorna el que coincide con el esquema actual del usuario: color: light-dark(black, white).
Configuración de color-scheme
Requiere declarar los esquemas soportados: color-scheme: light dark; en :root o mediante <meta name="color-scheme">.
Variables de tema simplificadas
:root { --bg: light-dark(#ffffff, #1a1a2e); --text: light-dark(#111111, #e0e0e0); }
Sin media queries. El navegador maneja el cambio automáticamente.
Cambio programático
document.documentElement.style.colorScheme = "dark";
Soporte
Chrome 123+, Firefox 128+, Safari 17.5+. Proporciona valores de respaldo para navegadores antiguos.