CSS Variables for Theming
Declare custom properties with --, use var(), override them in nested scopes, and implement a light/dark theme toggle.
What Are CSS Custom Properties?
CSS custom properties (CSS variables) store values that can be reused throughout a stylesheet. Declared with --name: value and accessed with var(--name). Unlike preprocessor variables (Sass), they're dynamic — you can update them with JavaScript.
Declaring Custom Properties
Declare properties on :root to make them globally available. You can also declare them on any element to scope them to that element's subtree.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}