Dark mode is now an expectation, not a feature. But a bad dark mode — washed-out grays, eye-straining contrasts, invisible form fields — is worse than no dark mode at all. Here is how to design dark interfaces that feel intentional, premium, and genuinely easier on the eyes.

Why Dark Mode Is More Than Aesthetics

Three concrete reasons dark interfaces matter beyond trend-chasing:

  • OLED power savings — on OLED screens (most modern phones), true black pixels are off. A dark interface can reduce screen power consumption by up to 60%
  • Reduced eye strain — in low-light environments, a bright white screen is genuinely uncomfortable. Dark UIs match ambient light levels better
  • Visual depth — dark backgrounds let gradients, glows, and illustration details pop in ways that light backgrounds flatten

The Cardinal Rule: Never Use Pure Black

Pure black (#000000) creates too much contrast with white text, which paradoxically causes more eye strain than a slightly lightened background. The human eye is not calibrated for maximum contrast — it prefers softness.

Use layered dark surfaces instead:

  • Base background: #0a0a0a or #0d0d0d
  • Card / surface: #111111 or #141414
  • Elevated component: #1a1a1a or #1e1e1e
  • Border: rgba(255,255,255,0.08) — never a flat gray

Each layer reads as being “above” the previous, creating depth without harsh contrast.

Text Contrast — Hierarchy Through Opacity

Dark-mode typography is not just inverting black to white. Use opacity layers to establish hierarchy:

  • Primary text: #ffffff — headlines, important labels
  • Secondary text: #a1a1aa — body copy, descriptions
  • Muted text: #71717a — timestamps, placeholders, helper text
  • Disabled: #52525b

This hierarchy communicates importance without colour — accessible and readable across all displays.

WCAG AA requires a contrast ratio of 4.5:1 for body text. Check your colour pairs at webaim.org/resources/contrastchecker before shipping.

Colour Accents on Dark Backgrounds

Accent colours behave differently on dark surfaces. Saturated colours that look vivid on white become neon-loud on black. Dial saturation down and brightness up compared to your light-mode palette.

Effective techniques for dark-mode accents:

  • Glow effects — a subtle box-shadow in your accent colour on hover creates a neon glow that only works on dark backgrounds
  • Gradient text — gradient headlines are a signature dark-mode technique; they read as flat on white
  • Low-opacity fills — use bg-brand-blue/10 (10% opacity accent) as card backgrounds for a tinted-glass effect

Form Inputs on Dark Backgrounds

Input fields are the most commonly broken element in dark-mode implementations. The default browser input on a dark background is a jarring white box. Design inputs explicitly:

  • Background: rgba(255,255,255,0.05) — barely tinted, not solid
  • Border: rgba(255,255,255,0.08) at rest, accent colour at focus
  • Text: full white, placeholder at 40% opacity
  • Avoid browser default outline — replace with a custom box-shadow focus ring

Images and Media

Photographs with white backgrounds look broken on dark surfaces. Options:

  • Use images with transparent backgrounds (PNG/WebP with alpha)
  • Add a subtle gradient overlay to integrate the image with the dark background
  • Use mix-blend-mode: screen on images to blend them naturally into dark surfaces

A great dark mode feels like it was always meant to be dark — not like a light design with the colours inverted. The investment in getting it right pays back in every hour a user spends in your interface, in every product screenshot shared on social media, and in every first impression your site makes in a dim room.