Web Development / CSS
Lesson 15 of 30
CSS variables and themes
CSS custom properties store values you reuse. Change them in one place, for example to switch between dark and light themes, like Lazo Lab's Settings tab.
Key points
- --name: value; to define
- var(--name) to use
- Swap them for dark mode
:root { --bg: #fff; --ink: #111; }
[data-theme="dark"] { --bg: #0A1020; --ink: #E8EDF5; }
body { background: var(--bg); color: var(--ink); }Quiz · +10 XP
How do you use a CSS variable called --accent?
Log in to save progress and earn XP.