Intermediate
Respect dark mode and reduced motion
This notice uses colour variables and a spinning loader. Make it respect the user's settings:
- in @media (prefers-color-scheme: dark), redefine the variables so the page has a dark background and light text;
- set color-scheme: light dark on :root so browser controls match;
- in @media (prefers-reduced-motion: reduce), stop the loader's animation.
What Check tests
- A dark-mode query sets a dark background and light text
- The page follows your current colour setting
color-schemeincludes dark- A reduced-motion query stops the loader
- The loader still spins for people who haven't asked for less motion
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.