What is Dark Mode?
A color theme where backgrounds are dark and text is light. It works best when all colors reference tokens or CSS variables, not hardcoded hex values.

1 lever · every token flips
Dark mode works best when colors are...
Write it in your own words in the app.
In real work
Implement dark mode with color tokens. Every background and text color references a token. No hardcoded hex anywhere.
In the illustration
Backgrounds are pale and text dark; the lever swings to DARK and every token valve turns together, so backgrounds deepen and text lightens at once with no panel repainted by hand.
Add dark mode in your component library by switching the six semantic colour tokens, not by overriding components, and check the contrast on the muted text.
Try it now
The fastest way to learn a word is to use it. Open this line in the agent you already work in and watch what it does. Change the tool to the one you use.
Go further
01Practice
Make it stick
One term a day, a short quiz, and sentence practice that checks your own words.
02Verify
Prove you know it
Pass the quiz and keep it in a Skills Wallet you can share with anyone who needs proof.
03Career
Find the work that uses it
See which roles lean on this vocabulary, and what they pay in year one.




