light-dark() Palette Generator

One value, both themes

light-dark() lets a single custom property hold both a light and a dark value: --bg: light-dark(white, #0b0f19). The browser picks the right one based on the element's color-scheme, so you can theme an entire site without a .dark class, a media query, or duplicated rule blocks.

The one requirement: light-dark() only works where color-scheme is set, which is why the generated :root includes color-scheme: light dark. That opts the page into both schemes and follows the user's OS preference. To force a theme on part of the page, set color-scheme: light or dark on a wrapper, exactly how the two preview panels above show the same tokens resolving differently.

Dark suggestions

Suggest dark from light inverts each color's lightness in HSL to give a sensible starting dark value. It is a head start, not a finished palette: dark themes usually want slightly muted, not merely flipped, colors, so tweak from there.