CSS Variables (--variable-name) provide centralized design tokens for instant light and dark theme switching.
1. Defining and Consuming CSS Variables
⊞Code Example
:root {
--primary-accent: #04AA6D;
--bg-canvas: #060c18;
--bg-surface: #0c1328;
--text-main: #ffffff;
--text-muted: #94a3b8;
--border-color: #1e293b;
}
/* Automatic Dark Mode Media Query */
@media (prefers-color-scheme: light) {
:root {
--bg-canvas: #f8fafc;
--bg-surface: #ffffff;
--text-main: #0f172a;
--text-muted: #64748b;
--border-color: #e2e8f0;
}
}
body {
background-color: var(--bg-canvas);
color: var(--text-main);
}
.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
}