light-dark() and color-scheme, side by side
The same declarations give two different results, because light-dark() reads each element's color-scheme. Look at the inputs: in the dark panel the browser draws the control dark too.
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
panel force-light rgb(248, 250, 252)
panel force-dark rgb(15, 23, 42)