I wish this is how colors always worked

The CSS light-dark() function simplifies color theming by letting you declare both light and dark mode values for each color in a single place, eliminating the need for duplicate color definitions under prefers-color-scheme media queries. Instead of maintaining two separate sets of CSS variables, you define each color once using light-dark(lightValue, darkValue) syntax. Toggling between themes is as simple as setting the color-scheme property on the body element via a data attribute or JavaScript. The main limitation is that custom themes beyond light and dark are not supported with this approach.