CSS Custom Properties & Runtime Theme Switching

Modern web applications achieve instant theme switching (light to dark, or brand A to brand B) without page reloads using CSS Custom Properties (CSS variables).

/* Brand A Theme */
:root[data-theme="brand-a"] {
  --color-interactive-primary: #0066cc;
  --font-family-primary: 'Inter', sans-serif;
  --radius-button: 6px;
}

/* Brand B Theme (More playful, rounded) */
:root[data-theme="brand-b"] {
  --color-interactive-primary: #ff4757;
  --font-family-primary: 'Outfit', sans-serif;
  --radius-button: 9999px;
}

Because the <button> component styles reference var(--color-interactive-primary), changing the data-theme attribute on the <html> root element instantly re-themes the entire application with zero JavaScript re-renders.