Turn on dark mode in most products and you get the same thing: a near black background, a slightly lighter grey for cards, and a slightly lighter grey for everything else. It is easy on the eyes and hard to read.
Fewer greys, more contrast
The usual mistake is adding a new grey for every layer. Five shades of near black are impossible to tell apart. Use two or three, and make the steps between them big enough to see.
Elevation goes up, not down
In light themes, raised surfaces cast shadows. In dark themes, shadows disappear. Show elevation with lighter surfaces instead: the higher the layer, the lighter the grey.
Keep colour, but calm it
Bright accent colours glow on dark backgrounds. Lower their saturation slightly and check that text on top of them still passes contrast checks.
A short checklist
- Use no more than three background greys.
- Make raised surfaces lighter, not darker.
- Tone down accent colours by a step.
- Test text contrast on every surface.
Dark mode is not the light theme inverted. It deserves its own set of decisions.
