How do you support themes and dark mode?
Keep colour purposes stable while choosing and checking values for light and dark themes.
A theme is a set of visual choices used together. Dark mode is one example, presenting an interface on darker backgrounds. It requires reconsidering colour relationships rather than simply inverting every colour.
Keep these basics in mind
- Purposes such as primary text and error message can remain the same while their values differ by theme.
- A mode selects a set of values for a context within shared rules, such as light or dark.
- Check text, icons, borders, photos, and overlays, rather than changing the page background alone.
- When supporting user or system preferences, agree on defaults and switching behaviour so actions remain clear.
See Figma’s mode guide for context-specific values and Spectrum’s colour guide for roles and combinations.
Build a theme
Illustrative theme mapping
These describe directions, not project colour values.
| Purpose | Light-theme example | Dark-theme example |
|---|---|---|
| Page background | Light surface | Dark surface |
| Primary text | Clear against the light background | Clear against the dark background |
| Error feedback | Readable error text and explanation | Rechecked error text and explanation |
Walk through an example
A form retains the primary text and error message roles when a user switches to dark mode. The team chooses dark values and checks error, disabled, and menu states together. If red text is unclear on the dark background, they adjust the error role rather than brightening the entire page.
Limits and common misunderstandings
Dark mode does not need to be tied to a brand change. Switching themes should not change task meanings, field names, or action order. Design-file modes do not automatically create website switching logic; browser implementation needs separate checks.