Dark mode without doubling your stylesheet
If dark mode doubled your CSS, the problem was never dark mode. It was that your colours were never tokens.
A theme swap should change values, not rules. If adding dark mode meant writing a second copy of every component, the colours were hard-coded at the point of use and the swap has nowhere to happen.
Define semantic tokens once, redefine only the tokens per theme, and no component rule changes at all.
- Name tokens by role, not by colour.
--surface, not--white. - Define the full light palette on the root, and only the overrides in the dark block.
- Handle all three states: explicit light, explicit dark, and system default.