CSS Variables and Theming

Custom properties let you define design tokens once and reuse them across components.

Start at the Root

:root {
  --bg: #ffffff;
  --fg: #0f172a;
  --primary: #2563eb;
  --radius: 1rem;
  --space-4: 1rem;
}

Use Variables in Components

.button {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--bg);
}

Theme Switching Pattern

:root[data-theme="dark"] {
  --bg: #020617;
  --fg: #e2e8f0;
  --primary: #60a5fa;
}

When the theme changes, the component code stays the same because only the variables change.

What Variables Are Great For

• color tokens
• spacing scale
• typography scale
• border radius values
• shadows and surface colors

Keep Tokens Intentional

Prefer semantic names like --surface-muted over raw names like --gray-200 when the value represents purpose, not just appearance.

Next Step

Continue to Transitions and Animations to add motion without making the interface feel heavy.