Why Dark Mode Should Not Be a Second CSS File

Short summary

Using a separate dark.css file for dark mode creates theme drift as every component change requires a matching override. The article advocates using semantic CSS custom properties (design tokens) instead — components reference roles like --color-surface and --color-primary, and themes simply swap token values at the :root level. This eliminates per-component dark-mode rules entirely.

• •Separate dark-mode CSS files cause theme drift as components evolve
• •Use semantic design tokens (CSS custom properties) so components reference roles, not colors
• •Themes become token-value swaps at :root — no per-component overrides needed

Generated with AI, which can make mistakes.