Dark mode website design: what changes when the ground goes dark
A dark theme isn't a light theme with the colours inverted. Pure black grounds, pure white text and the bright accent from your light theme all behave differently on dark. Dark mode website design has its own rules: off-black backgrounds, softened text, desaturated accents, and depth shown by lightness instead of shadow.
Two different things called dark mode
People use the phrase for two separate ideas. One is a dark website: a site whose only design is light text on a dark ground, chosen for mood, as many software, music and luxury brands do. The other is a dark theme option: a site that offers light and dark versions and switches between them, either by a toggle or by following the visitor's system setting through the prefers-color-scheme media query. The design rules below apply to both. The engineering differs: a theme option means every colour has to work twice.
The rules that are specific to dark grounds
- Use off-black, not #000. A ground around #0d1117 to #151515 reduces the harsh edge between text and background, keeps a little room for darker shadows and lets you show surfaces as slightly lighter panels. Pure black also makes smearing more visible on some OLED screens when scrolling.
- Soften the text. Pure white body text on near-black can glare and appear to bleed. Text around #e6e6e6 to #f2f2ee still clears contrast comfortably.
- Desaturate and lighten accents. A saturated blue that works on white often vibrates on black and fails contrast. Pick a lighter, less saturated version of the same hue for the dark theme.
- Show elevation by lightness. Shadows barely show on dark grounds. Make raised surfaces (cards, menus, dialogs) slightly lighter than the page instead, with a hairline border if needed.
- Go one step lighter on type weight. Light text on dark looks heavier than the same weight on light. If the light theme uses 400 for body, 400 is fine; avoid pushing headings into very heavy weights.
- Treat images separately. Bright photos can glow on a dark page. A slight dim or a subtle border helps, and logos with dark text need a light version.
Contrast in both themes
The WCAG contrast thresholds apply to dark themes exactly as they do to light ones: at least 4.5:1 for normal body text and 3:1 for large text (about 24px, or about 18.5px bold) at level AA, and, under non-text contrast, 3:1 for the visible boundaries of controls such as input borders and focus rings. The usual dark-theme failures are secondary text in a mid-grey that looked fine on white, borders so subtle they vanish, and an accent colour copied unchanged from the light theme.
| Role | Light theme | Dark theme |
|---|---|---|
| Ground | Warm white or very light grey | Off-black, slightly tinted |
| Surface (cards, panels) | White or a shade darker than the ground | A shade lighter than the ground |
| Text | Near-black | Off-white |
| Muted text | Mid-grey that passes 4.5:1 | Lighter grey that passes 4.5:1 |
| Lines | Text colour at low opacity | Text colour at low opacity, slightly stronger |
| Accent | Deep, saturated | Lighter, less saturated version of the same hue |
Should a site follow the visitor's setting?
Following prefers-color-scheme is polite for sites people read for a long time, like documentation, blogs and tools, and it's easy to add with CSS custom properties: define each colour role once and redefine the set inside the media query. Set color-scheme: light dark so form controls and scrollbars match. For brand sites with a strong identity, many teams choose one theme and keep it, because the dark version of a cream-and-ink brand isn't really the same brand. Either way, test both themes on a phone in daylight, where dark pages with low-contrast grey text are hardest to read.
When a dark design works
A dark theme website suits products used at night or in dim rooms, photography and film where images should glow against the ground, software and developer tools whose users live in dark editors, and luxury brands that want a gallery feel. It suits long-form reading less well for many people, especially in bright light, and it can feel heavy for food, children's or healthcare sites unless the colours are warm.
Light and dark themes in Anticode
Each of Anticode's seven design systems has a light palette and a dark palette designed as a pair, so the dark version isn't an inversion. The theme setting has three options: Auto uses the design system's own palette (Technical and Luxury, for example, are dark by default), Light and Dark force one or the other. You can switch theme in the visual editor at any time.
One limit to know: Auto doesn't follow the visitor's light or dark setting. A published Anticode page shows one theme to everyone. If you need a site that switches with prefers-color-scheme, you'd add that yourself in an exported copy. For colour choices in dark themes, see the dark mode colour palette guide.
Questions people ask
Should a dark website use pure black?
Usually not. An off-black ground is easier on the eyes, lets lighter surfaces show depth and avoids the hardest edge between text and background. Pure black can work for a gallery-like look with few words.
Are dark websites harder to read?
For long text, many people find light themes easier, particularly in bright light or with astigmatism. Well-designed dark themes with softened text and enough contrast are comfortable for shorter reading and dim rooms.
How do I show which card is raised in dark mode?
Make it lighter than the ground rather than adding a shadow. Each step of elevation gets a slightly lighter surface, optionally with a thin border.