Developer implements dark mode by remapping CSS variables instead of editing components

A developer added dark mode to an app containing roughly 1,200 hardcoded indigo and 2,600 hardcoded slate Tailwind class usages without modifying individual components. Instead of manually adding dark-mode variants to each component, they used two token-based strategies: replacing color names with a single brand token via a one-time codemod, and remapping Tailwind v4's slate color scale under a .dark CSS selector. Because Tailwind v4 already resolves utility classes through CSS variables, redefining those variables in the .dark scope caused every affected element across the codebase to flip automatically. The developer noted that a reversed color ramp requires careful handling of surface hierarchy and intentionally fixed colors for elements like dark CTAs and tooltips. The broader takeaway shared was that if a visual change requires editing many files, the property likely belongs in a design token rather than in component markup.