Paths/Frontend Engineer/CSS & Design Systems / Tokens & Theming
Ship a Dark Mode
Dark mode is a token swap, not a second stylesheet. Write the override that changes the tokens and nothing else.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/styles/theme.css exists○
- The file follows the system colour scheme○
- The file overrides the tokens for the dark theme○
- The file keeps a manual theme selector○
02Walkthrough
1 of 3 revealed- 01
Write the system override
The media query follows the operating system - most users never touch the toggle in their life.
echo '@media (prefers-color-scheme: dark) {\n :root {\n --color-ink: #f5f2ec;\n --color-smoke: #b4b0a8;\n --color-surface: #16161a;\n --color-border: #2b2b30;\n }\n}' > ~/frontend/src/styles/theme.css - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list