Surface pattern · updated 3 Sept 2026
Dark mode
Dark mode is a second colour scheme in which the page background is dark and text is light, either as the default or as a toggle that follows the visitor's system preference. Done properly, only the neutrals change between modes; the brand colours stay identical so both modes read as one design.
Think of it as
The same room with the lights off and the lamps on. The furniture has not moved; only the walls changed colour.
Worked example
Every theme on this site ships light and dark token sets generated from six roles. The brand primary and accent are the same hex in both; the neutrals are re-lit to target lightness values while keeping their hue. The DESIGN.md states this as a rule an agent can be held to: never restyle brand colours between modes.
Why it matters
Dark mode doubles the number of colour pairs that must pass contrast, and the failures are different ones: light text on a dark card often passes where dark text on a light card failed, and vice versa. A dark theme that was designed by inverting the light one usually fails on the borders and the muted text.
How it fails
Pure black backgrounds with pure white text, which glare. Brand colours that shift hue between modes so the two themes feel like different products. Borders that vanish because the light-mode border colour was reused.
What to measure open the decoder →
- Text on background, text on card and muted text on background, in both modes
- Whether primary and accent hex values are identical across modes
- Whether the neutrals keep their hue when re-lit
- Border and input contrast against the dark surface
Where you meet it
- Developer tools, almost universally
- Media and entertainment
- Operating system settings
On this site
Every theme page has a light and dark toggle over a live preview, an 8 by 8 contrast grid, and a DESIGN.md that prints both token sets. The Dark hub collects sites that lead with it.
Showcase collections that exhibit it
Build it
Next rung
Dark mode is a surface decision. The next surface decision is depth: how cards and panels separate from the background, which on dark surfaces is done with lightness steps and on light ones with shadow.