Dark Mode Theming
Redefine variables inside prefers-color-scheme: dark — all components update automatically.
CSS
Intermediate
4 min read
Dark Mode with Variables
Example
:root { --bg: #fff; --text: #212529; }
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a2e; --text: #e0e0e0; } }
body { background: var(--bg); color: var(--text); } Pro Tip
You only change variables — components need no modification.