CSS Variables
Dynamic values for maintainable stylesheets
🎨 What are CSS Variables?
CSS Variables (Custom Properties) allow you to store values that can be reused throughout your stylesheet. They make your CSS more maintainable and enable dynamic theming.
/* Define variables in :root */
:root {
--primary-color: #3b82f6;
--secondary-color: #10b981;
--font-size: 16px;
--border-radius: 8px;
}
/* Use variables with var() */
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
border-radius: var(--border-radius);
color: white;
padding: 12px 24px;
border: none;
}
Output:
Variable Features
Global Scope
Define variables in :root for global access
:root {
--main-color: #007bff;
}Local Scope
Define variables within specific elements
.card {
--card-bg: #f8f9fa;
background: var(--card-bg);
}Dynamic Updates
Change variables with JavaScript
document.documentElement
.style.setProperty(
'--primary-color', '#ff6b6b'
);Fallback Values
Provide fallback if variable is undefined
color: var(--text-color, #333);🔹 Complete Theme System
A comprehensive design system uses CSS variables for colors, spacing, typography, and shadows, ensuring consistency and easy theming. Define variables in :root for global access, then override in specific contexts or media queries for dark/light modes. This approach streamlines maintenance, enables rapid prototyping, and supports brand cohesion. Combine with CSS custom properties for dynamic theming, allowing real-time theme switching without reloading, enhancing both developer experience and user personalization.
/* Design System Variables */
:root {
/* Colors */
--color-primary: #3b82f6;
--color-secondary: #10b981;
--color-accent: #f59e0b;
--color-danger: #ef4444;
--color-success: #22c55e;
/* Neutral Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-900: #111827;
/* Typography */
--font-family-sans: 'Inter', sans-serif;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
/* Component using the design system */
.modern-card {
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-6);
font-family: var(--font-family-sans);
}
.modern-card h3 {
color: var(--color-gray-900);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-3);
}
.modern-card p {
color: var(--color-gray-600);
font-size: var(--font-size-base);
line-height: 1.6;
margin-bottom: var(--space-4);
}
.modern-button {
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all 0.2s ease;
}
.modern-button:hover {
background: var(--color-primary-dark, #2563eb);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
Output:
Modern Card
This card uses CSS variables for consistent styling across the design system.
🔹 Dark Mode with Variables
Implementing dark mode with CSS variables involves defining color schemes in :root and toggling them via a class or media query (prefers-color-scheme). For example, --bg-color and --text-color switch between light/dark values. This method ensures consistent theming across components, reduces code duplication, and supports user preference detection. Combine with transitions for smooth theme switching, and ensure all interactive elements maintain sufficient contrast ratios for accessibility compliance in both modes.
/* Light theme (default) */
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
}
/* Dark theme */
[data-theme="dark"] {
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--text-primary: #ffffff;
--text-secondary: #b3b3b3;
--border-color: #404040;
}
/* Components automatically adapt */
.theme-card {
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 20px;
border-radius: 8px;
transition: all 0.3s ease;
}
.theme-card .subtitle {
color: var(--text-secondary);
}