Lesson 4 of 8
Theme switcher
- 14 min
- 6 checks
- 3 hints
- Go to task
Goal
Three states, not two
01
Explanation
A theme has three states, not two: light, dark and follow the system. Most switchers forget the third one, which forces users into a choice they never asked to make.
The approach is to make every color a CSS variable and let the default state follow prefers-color-scheme. When users pick a theme themselves, you write it to data-theme on the root element, and it takes precedence over the default.
Also set color-scheme with each theme, so the browser colors form fields and scrollbars to match.
02
Your task
Make the button cycle through the three states. On each click it should set data-theme, update its label and announce its state with aria-pressed.
Checks
6 checks- Starts by following the system, with no data-theme
- The first click picks light
- aria-pressed is true after picking a theme
- The second click picks dark and actually changes the colors
- The third click goes back to the system
- The button text changes with each state