Building Theme Systems with CSS Custom Properties
CSS custom properties let you build themeable design systems without a preprocessor. Here is how I structure mine for production applications. When our team decided to add dark mode to a React application with over 200 components, I knew we could not use Sass variables. They compile at build time and cannot respond to user preferences. CSS custom properties were the only option that would let us switch themes at runtime without a full page reload. That migration taught me a system for structuring custom properties that has held up across every project since. The migration was not trivial. We had 200 components, each with hardcoded color values scattered through Sass partials. Some components used variables that other components did not. A few had inline styles from developers who were in a hurry. The first attempt at dark mode was a disaster: we tried generating a second stylesheet with dark colors and swapping it out, which caused a flash of unstyled content and broke cached images. The second attempt used CSS custom properties, and it worked so cleanly that I have never gone back to build-time theming. The Three-Layer Structure I…