Designing a Dark UI That's Easy on the Eyes

Dark mode is more than inverting colors. Done carelessly, it turns muddy and harsh. Done well, it feels calm and premium. Here’s what I keep coming back to.

Avoid pure black

Pure #000 against bright text creates harsh, vibrating contrast. A very dark neutral like #0a0a0d is softer and lets you layer elevation with subtle lighter surfaces.

Convey elevation with light, not just shadow

In the dark, shadows are hard to see. Instead, raise surfaces by making them slightly lighter, and use a faint border to define edges.

• Base background: the darkest layer.
• Cards / surfaces: a touch lighter.
• Hover / active: lighter still, or an accent-tinted border.

Tame your accent color

One accent color, used deliberately, reads as intentional. Splashing three or four everywhere reads as noise. Reserve the accent for actions, links, and key highlights.

Mind text contrast

Body text doesn’t need to be pure white — a soft off-white reduces glare while still meeting WCAG contrast targets. Reserve the brightest tone for headings.

The goal is a UI someone can sit in for hours without fatigue. Restraint is the whole game.