CSS Variables: Tokens, Themes and Runtime Updates

Use CSS custom properties as a living design system with reusable tokens, cleaner theming and runtime styling without duplicated rules.

How much do you know about CSS?

📘 Theory

Declaration, inheritance and scope

The basics matter because custom properties are part of the cascade, not a separate system.

A custom property is declared with a name like `--space-md` and consumed with `var(--space-md)`. Because it participates in the cascade, it can inherit and be redefined by context.

Not everything belongs in `:root`. Put global tokens there, but keep component-only variables close to the component when that improves clarity.

Global: `:root { --space-md: 1rem; }`
Component: `.card { --card-padding: 1rem; }`
Context: `[data-density="compact"] { --space-md: .75rem; }`

Base tokens and semantic tokens

This is the pattern that scales better in real products.

Base tokens represent raw values such as palette entries, spacing or radii. Semantic tokens represent UI intent: surface, text, accent, border, danger and so on.

Components should consume semantic tokens whenever possible. That way a rebrand or theme change happens at the token layer, not one button at a time.

Fallbacks and runtime updates

Custom properties become even more useful when you need resilience and live UI changes.

Fallbacks like `var(--color-title, #111827)` protect the component if a token is missing during a migration or partial refactor.

You can also update variables from JavaScript in real time. That is powerful for theme pickers, accessibility settings or product customization panels.

1 Declaration, inheritance and scope 2 Base tokens and semantic tokens 3 Fallbacks and runtime updates

🧭 Key visuals

CSS variable scope

It clarifies how global tokens and local overrides can coexist cleanly.

Relationship between global CSS variables in root and local component variables.

Token flow with CSS variables

It helps reinforce the idea of centralizing decisions and propagating brand changes consistently.

Flow from root-level token definition to component consumption with var().

🧪 Learn by doing

Example Demo: design tokens applied to a panel See how a component changes when the values come from reusable tokens instead of hardcoded styles.

⌄

Example Interactive demo: CSS variables and HSL at runtime Adjust hue, saturation and lightness to see how one root-level token can propagate through the entire interface.

⌄