The CSS light-dark(LIGHT, DARK) function returns the first value under a light color-scheme and the second under a dark one — letting you define one set of custom properties that adapts automatically, with no @media (prefers-color-scheme) blocks. Define your token pairs below, preview the rendered theme, and copy the generated CSS.
:root. light dark means the browser picks based on prefers-color-scheme. light-dark() needs an explicit color-scheme to resolve.--name: light-dark(LIGHT, DARK);. Hex shortcuts give you a color picker; type any valid CSS value (e.g. oklch(0.6 0.18 250)) directly.color-scheme works in isolation from this page.
Support: light-dark() is in Chrome 123+, Edge 123+, Safari 17.5+, and Firefox 120+ (all 2024). Older browsers ignore the declaration — provide a fallback by repeating the property with a static value first.
color-scheme on :root — without it, light-dark() resolves to the light value. color-scheme: light dark lets the UA follow the user's preference.color-scheme: light on a .theme-light class and color-scheme: dark on .theme-dark — the same light-dark() tokens automatically swap.light-dark() inside light-dark() — only the outermost call resolves cleanly. Keep nesting in custom properties, not in the function itself.color-scheme automatically — so explicitly setting it also fixes browser-rendered UI without any color overrides.background: var(--bg-fallback); background: light-dark(white, #111); — older browsers use the first, modern ones override with the second.