Two Color Schemes, Four Modes: Native CSS Theme Switching.

Frontend is finally moving toward vanillaization and that is the best thing that has happened to frontend since Wes Bos published his first courses. Native browser support for themes works absolutely fine and that can be enough for many projects, but I just wanted to have fun. I didn't want just one color scheme with light and dark variants. I wanted two, each supporting light and dark. Four variants in total. And the key is using native browser features. And it worked. The Requirements: Light and dark mode, handled by the browser natively A second "spring" (or whatever) color scheme with a completely different palette A toggle button to switch between default and spring No flash of wrong theme on reload No page reload needed to switch The Specificity Hack: :root:root:root If you use styled-components, you've probably run into specificity wars where your global CSS variables get overridden by styled-components' injected styles. The fix is delightfully dumb, just repeat :root three time