JSTAcademy
0 XP
Dashboard
Crash Courses
CSS Custom Properties & Design Tokens
10 min
Masters+175 XP
Crash Courses · Masters

CSS Custom Properties & Design Tokens

Use CSS variables to build maintainable, themeable design systems.
10 min read+175 XP on completionCert: HTML & CSS Crash Course
Tap any word in the text below to start reading from there.

CSS Custom Properties & Design Tokens

Define once, use everywhere. Change --color-primary in one place and every button, card, and link updates.

Defining Tokens

:root {
  --color-primary: #f59e0b;
  --color-text: #1a1a1a;
  --color-bg: #ffffff;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
}

Dark Mode

:root { --color-bg: #ffffff; --color-text: #111827; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f0f0e; --color-text: #f9f9f7;
  }
}

:root[data-theme="dark"] { --color-bg: #0f0f0e; --color-text: #f9f9f7; }

body { background: var(--color-bg); color: var(--color-text); }

All components automatically switch — no per-component changes needed.

var() Fallbacks

color: var(--color-accent, #f59e0b);   /* fallback if var undefined */
padding: var(--spacing-md, 16px);

Scoped Component Variables

.card {
  --card-padding: 24px;
  padding: var(--card-padding);
}

.card.compact { --card-padding: 12px; }  /* only affects .card.compact subtree */
0%