The same dashboard in dark mode, read back from the page
Read back from the real page: with the saved choice dark, the card is dark, the text is light, and the line and the stack use the dark values. The button then cycles to auto and removes the attribute, so the system's setting decides. The preview's system setting is light, so after that click the page returns to the light tokens, and the picture (taken at the end) shows the light page.
Move every chart colour into theme.css (light and dark), use a colour-blind-safe palette that passes contrast, write titles that state the finding, add a theme button, and make every chart redraw at its real width with fewer ticks when narrow.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a --chart-warn token (amber in light, lighter amber in dark) and use it for the outage annotation in rides-line.js instead of --chart-alert. Which two files change?
Make main.js store the theme choice with localStorage only when storage is available. Which line already does that, and what happens in a private window?
Explain it without notes
How does the dashboard switch between light and dark without redrawing any chart?
How does a chart choose fewer ticks on a phone, and where is the breakpoint stored?
Why does each chart now return resize as well as update?
Preview
Console
Nothing logged yet.Expected console output
Loaded 365 days, 0 cleaning notes
theme attribute: dark | button: Theme: dark
card background: rgb(22, 34, 43) | page text colour: rgb(230, 237, 242)
rides line stroke: rgb(79, 209, 192)
first stacked series fill: rgb(0, 114, 178)
rides line title: Rides peaked at 4,380 on 18 Jul 2025 and fell to 439 on 14 Aug 2025
after one click: (no attribute) | button: Theme: auto