Why CSS Tokens Beat Separate Dark Mode Files for Scalable Theming

A common approach to dark mode involves maintaining two separate CSS files — one for light styles and one for dark overrides — but this method creates duplication and inconsistency as applications grow. Each time a component is updated, developers must remember to mirror every change in the dark mode file, covering hover states, focus rings, disabled styles, and more. This leads to 'theme drift,' where the two files gradually fall out of sync. A more robust solution uses semantic CSS custom properties, or tokens, so components reference named roles like --color-surface rather than hardcoded values. With this token-based approach, switching themes requires only redefining the token values, leaving all component styles untouched.