Follow the system setting
Change your operating system's appearance setting (or use DevTools: Rendering, then "Emulate CSS media feature prefers-color-scheme") and the box and message update without a reload.
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.