Open navigation menu

CSS Custom Properties Design Tokens

Define design tokens using CSS custom properties with fallback values and runtime theme switching capability.

CssConfig Management

Code

:root {
  --color-primary: #4f46e5;
  --color-bg: #ffffff;
  --spacing-unit: 8px;
}

[data-theme="dark"] {
  --color-primary: #818cf8;
  --color-bg: #1a1a2e;
}

.card {
  background: var(--color-bg);
  color: var(--color-primary);
  padding: calc(var(--spacing-unit) * 3);
}

Related Examples