Every codebase with dark mode support has this structure: the component styles, then a @media (prefers-color-scheme: dark) block that restates the same selectors with different colors. The media query block might be at the bottom of the file, in a separate dark-mode stylesheet, or scattered next to each component — but it's always a duplication. You're maintaining two values per color, physically separated, for every element that changes appearance between modes.
light-dark() is the native alternative. It takes two values — one for light mode, one for dark — and picks the right one based on the color-scheme in scope. Same property, same rule, both values present, no media query needed.
The color-scheme prerequisite
light-dark() resolves against the used color-scheme of the element. Miss this and you get the quietest bug in the feature: without color-scheme: light dark in scope, the element only supports light, so light-dark() returns its first argument and your dark value never applies. Nothing errors. Nothing is invalid. Dark mode just never happens. The minimum setup is a single declaration on :root:
:root {
