Intermediate
Light and dark theme tokens
Turn the hard-coded colours into a theme:
- on :root, set color-scheme: light dark and two tokens with light-dark(): --bg (light #ffffff, dark #111827) and --text (light #1f2937, dark #f9fafb);
- make body use var(--bg) and var(--text);
- add overrides so <html data-theme="light"> forces light and <html data-theme="dark"> forces dark.
What Check tests
- The page supports both schemes by default
- data-theme="light" gives a white page with dark text
- data-theme="dark" gives a dark page with light text
- Body uses the tokens, defined with light-dark()
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.