Dark Mode & Theming in CSS
From the CSS cheat sheet · Custom Properties & Functions · verified Jul 2026
Dark Mode & Theming
Implement dark mode with CSS variables and media queries
css
:root {
--bg: #ffffff;
--text: #1f2937;
--primary: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111827;
--text: #f9fafb;
--primary: #60a5fa;
}
}
body { background: var(--bg); color: var(--text); }💡 Override CSS variables in @media (prefers-color-scheme: dark) — one change, everything updates
⚡ color-scheme: light dark on :root makes browser UI (scrollbars, inputs) match your theme
📌 Support both system detection and manual toggle — store the choice in localStorage
🟢 Slightly dim images in dark mode with filter: brightness(0.9) to reduce eye strain
dark-modethemingvariables