Tokens and a theme switch
One attribute change swaps three tokens, and every rule that reads them updates. The script clicks the button once so you can see both themes in the console; click it yourself to switch back.
A theme is a set of custom properties (colour tokens) that every component reads; dark mode swaps those values, color-scheme tells the browser to draw its own parts dark too, light-dark() picks a value per scheme, and prefers-color-scheme follows the user's system setting.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write tokens for a light and a dark theme with light-dark() and use them on body and on .card (which should be a slightly different surface colour).
Write CSS so a single <aside class="promo"> is always dark, even on a light page, including its form controls.
Write the JavaScript for a toggle button #theme that switches data-theme on <html> between light and dark and saves it.
Explain it without notes
How would you structure the CSS for a site that supports light and dark themes?
What does the color-scheme property do, and why is it needed even if you write a dark theme yourself?
What does light-dark() do, and what does it depend on?
How do you build a theme toggle that remembers the user's choice without a flash of the wrong theme?
Preview
Console
Nothing logged yet.Expected console output
light rgb(255, 255, 255)
dark rgb(17, 24, 39)