Dark themes and colour schemes

A dark theme uses dark surfaces with light text. People choose it for comfort in low light, personal preference or battery saving on some screens. It is not simply inverted colours.

Key principles

• Avoid pure black and pure white. Use dark greys for surfaces and slightly off-white text to reduce glare and halo effects.
• Desaturate colours. Bright saturated colours vibrate on dark backgrounds; use lighter, softer versions.
• Elevation with lightness. Shadows are hard to see on dark surfaces, so raised surfaces are usually slightly lighter.
• Check contrast again. Every text and UI colour needs re-testing in the dark theme.
• Images and illustrations may need dark versions, and logos may need light variants.

Implementation

Use semantic tokens such as surface/default and text/primary with Light and Dark modes. Components never reference raw colours, so switching theme is automatic. Respect the operating system setting by default and let people override it.

Many people now expect a dark theme, and some need it to reduce eye strain or light sensitivity. A poorly made dark theme, with harsh contrast, vibrating colours or invisible elevation, is worse than none. Token-based theming makes it maintainable.

A podcast app adds a dark theme by inverting colours. The pure white text on pure black looks harsh, the bright brand orange buzzes, cards are indistinguishable from the background and the logo disappears.

The team redesigns with a #121212-style dark grey base, lighter surfaces for raised cards, off-white text, a softer orange for actions and a light logo variant. Everything is driven by semantic tokens with two modes, and contrast is checked for every pairing.