CSS Variables (Custom Properties) — Theming & Design Tokens
Use CSS custom properties for colors, spacing, and themes. Dark mode and design system patterns.
CSS custom propertiescss variablescss design tokens
CSS Variables for Theming
CSS variables (--color-primary) let you define reusable values and switch themes at runtime — essential for dark mode and design systems.
Why CSS custom properties Matters
Custom properties enable runtime theme switching and consistent design tokens — required for dark mode and white-label products.
Define tokens on :root, override in [data-theme='dark'], and reference with var(--token) everywhere instead of hard-coded hex values.
CSS custom properties — Key Ideas You Must Know
- :root for global tokens
- var(--name, fallback)
- Scoped variables on components
- Dark mode via prefers-color-scheme or data-theme
- Works with calc()
CSS custom properties Code Example
CSS
:root {
--color-primary: #10B981;
--space-md: 1rem;
}
.button {
background: var(--color-primary);
padding: var(--space-md);
}Practice CSS custom properties with Free Lessons
Study CSS variables on Sturdee, then add a dark mode toggle to a practice page.
Tip: Free interactive lesson: /tutorials/css/css_variables — practice CSS custom properties with runnable code on Sturdee.
CSS Variables (Custom Properties) — FAQ
Frequently Asked Questions
CSS variables vs Sass variables?+
CSS variables are live in the browser and can change at runtime. Sass variables compile away.
Continue learning interactively
Free tutorial: /tutorials/css/css_variables →