CSS variables turn your stylesheet from hardcoded values into a configurable system. Change one line, retheme the whole site — it is exactly how this website works.
Design tokens
:root {
--bg: #ffffff;
--text: #111827;
--brand: #6d6ffb;
--space: 16px;
--radius: 10px;
}
.card {
background: var(--bg);
color: var(--text);
padding: var(--space);
border-radius: var(--radius);
}Dark mode = swap the tokens
body.dark {
--bg: #0a0a10;
--text: #f4f4f6;
}
/* every component using var() updates instantly */Update from JavaScript
document.documentElement.style.setProperty('--brand', '#f97316');Unlike Sass variables, these live in the browser at runtime — themes, user preferences, even animation values can change on the fly. Full lesson: CSS Variables.