Designing dark mode palettes that are easy on the eyes

By the 000098 editorial team · Updated October 8, 2026 · 6 min read

Dark mode is not simply inverted light mode. Pure black backgrounds with pure white text cause glare and halo effects for many readers, and saturated brand colors can vibrate against dark surfaces. A few rules make dark themes comfortable.

Use dark grays or tinted darks, not pure black

Most design systems use a base surface between about #121212 and #1E1E1E, or a tinted near-black that echoes the brand. A navy brand can use a blue-black such as #0B0D24 for the background and slightly lighter navy for cards. Lighter surfaces indicate elevation: the higher a card sits, the lighter it gets.

Soften text

Use off-white (around 87–90% white) for body text and a dimmer value for secondary text. Check both against your surface; secondary text is where dark themes most often fail WCAG.

Desaturate and lighten accents

A deep brand color like #000098 has excellent contrast on white but almost none on a dark background (about 1.45:1 against black). In dark mode, switch to a lighter tint from its scale, such as a periwinkle around #8C8CFF, for links and buttons. The token stays "brand primary"; only its value changes per theme.

Rethink states and shadows

• Shadows barely show on dark surfaces; use lighter surfaces or subtle borders for depth.
• Error reds and success greens usually need lighter, less saturated versions.
• Focus rings need 3:1 contrast against the dark surface too.

Images and charts

Reduce the brightness of large photos slightly and give charts a dark-mode palette. Many chart colors chosen for white backgrounds become illegible on dark ones.

Implement with tokens

Define semantic tokens (surface, text, primary, border) and map them to different values per theme with CSS custom properties and prefers-color-scheme. Generate the light and dark variants from the same 50–950 scale shown on every color page here.