Colour · 04 of 04
Design light and dark themes deliberately
Keep the meaning and readability of each colour role consistent across themes.
The idea
A dark theme needs its own colour choices.
Simply inverting a light palette can make imagery, borders and status colours difficult to interpret. Define roles such as background, surface, text, muted text and accent, then choose values for each theme.
Review whole screens, including forms, dialogs, charts and empty states. An accent may need adjustment to keep a similar visual emphasis, but there is no universal lightness or saturation offset. Check contrast in both themes and ensure that focus, selection and errors remain recognisable.
How to see it
Terms used in this lesson
The parts
- Theme
- A coordinated set of colours and surfaces.
- Semantic role
- A reusable purpose such as background, text or error.
- Elevation
- A visual distinction between layered surfaces.
In practice
- Map colour roles separately for each theme
- Check forms, charts and dialogs in both
- Review focus and selection states
Avoid
- Assuming inversion produces a finished theme
- Applying a fixed adjustment to every colour
- Testing only the opening screen
The test
Switch themes on a complete task. Can you still read the supporting text and identify every state, boundary and action?
Use the Contrast Grid to check each theme's palette separately, including muted text and raised surfaces.
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.