I added dark mode by editing CSS variables not 100 components

Short summary

The author avoided rewriting 1200+ components by treating dark mode as a CSS variable remapping problem instead of a component-markup problem. Two-step approach: codemod to replace hardcoded colors with brand-token references, then reverse the token values inside the .dark selector so all utilities flip automatically. Result: zero component changes, dark mode ships with one token map, accent presets become trivial, includes edge cases like surface hierarchy and native elements.

• •Dark mode implemented by editing CSS variables and tokens, not component markup
• •Two-step strategy: brand-token abstraction via codemod, then reverse remap in .dark selector
• •All utilities flip automatically with zero component changes; accent presets become token remaps

Generated with AI, which can make mistakes.