Intermediate
Theme a page with custom properties
Build a light and dark theme with CSS variables.
On :root, define --bg: #ffffff, --text: #111827 and --accent: #2563eb. Use them for the body's background and text colour, and for the .btn background. When the <html> element has data-theme="dark", redefine them as --bg: #111827, --text: #f3f4f6 and --accent: #60a5fa.
Finally, make the .danger button use #dc2626 as its accent by overriding the variable on that button, not by setting its background directly. It should stay red in both themes.
What Check tests
- Light theme: white background and dark text
- Light theme: the Save button uses the blue accent
- Dark theme: setting data-theme="dark" on <html> swaps background, text and accent
- The danger button is red in both themes
- The colours come from variables (changing --accent on <html> recolours the Save button)
- The danger colour is set by overriding the variable
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.