CSS Variables (--custom-property) provide clean, centralized design token management for colors, spacing, and instant dark mode switching.
1. Defining and Consuming CSS Variables
⊞Code Example
:root {
--primary-accent: #04AA6D;
--bg-surface: #0c1328;
--text-main: #ffffff;
--text-muted: #94a3b8;
--border-subtle: #1e293b;
}
body {
background-color: #060c18;
color: var(--text-main);
}
.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-main);
}
.card .subtitle {
color: var(--text-muted);
}