Designing for Dark Mode: More Than Just Inverting Colors

Never use pure black or pure white

Pure white text on pure black maximises contrast and produces halation — the visual smearing of light text into dark surroundings — which is particularly hard on astigmatic and tired eyes.

Use a very dark grey for surfaces and a slightly softened white for text. The contrast ratio stays comfortably compliant while the text becomes markedly easier to read for long stretches.

Depth comes from surface lightness, not shadow

In a light theme, elevation reads through shadow. On a dark background shadows are nearly invisible, so the entire depth cue disappears.

Dark themes convey elevation by making raised surfaces lighter. Build a small ladder of surface levels and use it consistently, so a modal reads as above a card which reads as above the page.

• Base surface, then two or three progressively lighter elevation steps.
• Use subtle borders where surfaces of similar lightness meet.
• Keep shadows for large overlays only, and expect them to do little.

Desaturate your accent colours

A saturated accent that reads well on white will vibrate against a dark surface. The eye struggles to focus on a highly saturated colour surrounded by darkness, which is fatiguing over time.

Reduce saturation and raise lightness for dark-theme accents. Brand colours generally need a dedicated dark variant rather than reuse, and treating this as a token override keeps it manageable.

Respect the user's actual preference

Honour the system colour scheme by default, and if you offer a manual toggle, persist that choice and let it override the system value in both directions.

Also re-check imagery. Screenshots and illustrations produced for a light interface can look like bright rectangles punched into a dark page, and often need dark-theme variants of their own.