123 Design StudioGood dark mode design is not a colour-inverted light theme, and the difference is brutally obvious the moment you ship a lazy one. A bad dark mode looks like grey mud with floating white text; a good one feels like a designed material with depth, hierarchy and calm.
This is a practical do/don't guide to dark mode design, built from the things that actually break in client work — surfaces, contrast, colour shifts and testing.
Surfaces and elevation
The core idea borrowed from Material and refined across Apple's interfaces: in dark mode, elevation is expressed with lighter surfaces, not heavier shadows. Shadows mostly disappear on dark backgrounds, so closeness to the viewer is signalled by a slightly lighter grey.
- Do build a small ladder of surface tones — base, raised, overlay — each a step lighter.
- Do keep the steps subtle; big jumps look like banding.
- Don't rely on drop shadows to create depth; they barely register on dark.
Never use pure black
Pure black (#000000) against pure white text creates a harsh, vibrating contrast that tires the eye, and it leaves you no room to show elevation. Most well-made dark themes sit on a very dark grey or near-black with a faint cool or warm cast.
Pure black is a wall. A near-black is a room you can put furniture in.
Desaturate everything
Saturated colours that look great on white become aggressive and glowing on dark. The fix is to pull saturation down and nudge lightness up so accents feel present without screaming.
- Do create dark-mode variants of brand colours, not the same hex reused.
- Do soften large coloured fills especially; small accents can stay punchier.
- Don't drop a saturated brand red or blue onto near-black and hope; it will vibrate.
Contrast, but not maximum contrast
Body text should not be pure white. Aim for a high-but-comfortable contrast — an off-white around the light-grey range — while still clearing WCAG AA for body copy and meeting the thresholds for interactive elements.
- Do use a tiered text colour system: primary, secondary, disabled, each with deliberate opacity or tone.
- Do check contrast on real surfaces, including your raised and overlay greys, not just the base.
- Don't assume passing on the base background means passing everywhere; cards change the maths.
Brand colour shifts
Your logo, illustrations and product UI may all need adjusted palettes in dark mode. This is the part teams skip and regret. Stripe, Linear and Apple all maintain distinct light and dark palettes rather than auto-inverting.
| Asset | Light mode | Dark mode move |
|---|---|---|
| Brand accent | Full saturation | Desaturate, raise lightness |
| Body text | Near-black | Off-white, not pure white |
| Surfaces | White + shadow | Near-black + lighter elevation |
| Borders | Light grey lines | Subtle light-on-dark or low-opacity white |
| Images/illos | As designed | Check halos; provide dark variants |
Real examples worth studying
You do not need to invent this from scratch. Study how the well-known references handle it:
- Linear — a benchmark for restrained, layered dark UI with subtle elevation.
- Apple — system-wide dark mode with consistent surface ladders and adjusted vibrancy.
- Stripe — careful dark documentation and dashboards where colour stays legible.
Test before you trust it
Dark mode is the theme most likely to look perfect on your calibrated monitor and fall apart elsewhere.
- Do test on OLED phones, cheap LCDs, and in bright and dim rooms.
- Do check that focus states, error states and disabled states all survive the switch.
- Do verify images with transparency do not show white halos.
- Don't ship dark mode unless you are committed to maintaining it; a half-broken dark theme is worse than offering only light.
The short version
Treat dark mode as its own design, not a filter. Near-black base, layered surfaces for elevation, desaturated accents, off-white text, real contrast checks on every surface, and proper testing across devices. Do that and dark mode reads as craft. Skip it and it reads as an afterthought — because it was one.