css · level 3 · unit 1 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A is a set of token values you swap all at once.
Write your components so they never name a colour, only tokens like var(--surface) and var(--text). A theme is a full set of values for those tokens. Swap the set and the whole page changes, without touching one component rule.
One way is a class: .theme-dark sets dark values, and everything inside follows. Another is the visitor's own setting: applies when their device is set to dark mode.
Many sites use both: the device setting by default, plus a class the visitor can switch with a button.
<div class="card">Light card</div>
<div class="theme-dark">
<div class="card">Dark card</div>
</div>:root {
--surface: white;
--text: #111827;
}
.theme-dark {
--surface: #111827;
--text: #f9fafb;
}
.card {
padding: 16px;
color: var(--text);
background-color: var(--surface);
}Press show my page to see it here.
To follow the device instead, put the dark values in @media (prefers-color-scheme: dark) around a :root rule.
guess first
The theme class sits on a wrapper. What does the button get?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<section class="theme-night">
<h2>Settings</h2>
<button class="btn">Save</button>
</section>:root {
--btn-bg: #0f766e;
--btn-text: white;
}
.theme-night {
--btn-bg: #f4a261;
--btn-text: #111827;
}
.btn {
color: var(--btn-text);
background-color: var(--btn-bg);
}your turn
Your turn. Write the dark theme.
Fill in dark theme values: a dark surface and a light text colour. The light card above it must stay white.
the page you’re styling
<div class="card">Light mode</div>
<div class="theme-dark">
<div class="card">Dark mode</div>
</div>your css
Press show my page to see it here.
- the dark card has a dark surfacenot checked yet
- the dark card has light textnot checked yet
- the light card stays whitenot checked yet
fix it
Dark mode never switches on. Can you fix it?
the page you’re styling
<main class="page">
<h1>Inbox</h1>
<p>You have no new messages.</p>
</main>your css
Press show my page to see it here.
- the media query names a real featurenot checked yet
- the page still reads
--surfacenot checked yet
- The tokens are fine. The browser does not recognise the media query itself.
- CSS spells every name the American way, media features included.
- Change
prefers-colour-schemetoprefers-color-scheme, then press run.
nailed it
you built a light and a dark theme. :D
- A theme is a full set of token values.
- Swap themes with a class on a wrapper.
prefers-color-schemefollows the visitor's device setting.
new words in your collection
- theme
- prefers-color-scheme
This lesson isn’t saved. A free account remembers every lesson you finish.