CSS Custom Properties for Theme Variables
Theme variables without a preprocessor
Sass and LESS variables compile to static values. Custom properties live in the browser and can change at runtime.
// Sass/LESS: compile-time only$primary: #7c3aed;$spacing: 16px;.btn { background: $primary; padding: $spacing;}:root { --primary: #7c3aed; --spacing: 16px;}.btn { background: var(--primary);}custom properties Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
Runtime updates
Change --primary in JS or a class and every use updates. No rebuild.
No build step
Plain CSS. Works in any environment, no Sass or LESS required.
Cascade and override
Set on :root, override in .dark or a component. Inherits like normal CSS.
How it works
Preprocessor variables like $primary: #7c3aed are replaced at compile time. The output is plain hex. To switch themes you recompile or generate multiple stylesheets.
Custom properties (--primary: #7c3aed) are real CSS. You read and set them with var(--primary). Toggle a class on the root or use JS to change --primary and every reference updates. No build, no duplicate CSS.