Designing for Dark Mode: Best Practices

It's not just about inverting colors. Learn the typography, contrast, and elevation rules for premium dark themes that users love.

By Aisha Rehan, UI/UX Lead. Published 2024-09-15. Design.

Dark mode is no longer optional — 82% of smartphone users prefer dark mode, and a growing portion of enterprise applications are dark-first. But building a great dark mode is surprisingly hard. Most teams get it wrong in the same predictable ways.

This article is a condensed version of our internal design system guide at RoboSoft Works, refined across a dozen dark mode implementations in 2023–2024.

Rule 1: Never Use Pure Black

Pure #000000 backgrounds create harshness and eye strain. Instead, use a very dark, slightly saturated color. Material Design uses #121212. We typically use HSL values in the range of 290–300 degrees (slight purple) at 4–8% saturation and 4–8% lightness. This slight tint creates a perceptible warmth and depth.

Dark mode should feel like a dimly lit room — not a void. The goal is reduced eye strain, not maximum contrast elimination.

Rule 2: Use Elevation, Not Opacity

In light mode, elevation is communicated through shadows. In dark mode, shadows become invisible. Instead, use surface color elevation: higher elements should be slightly lighter than the base background.

A good scale to follow:

  • Level 0 (base): background, e.g., hsl(290, 45%, 4%)
  • Level 1 (cards, panels): hsl(290, 35%, 7%)
  • Level 2 (dropdowns, tooltips): hsl(290, 30%, 11%)
  • Level 3 (modals, overlays): hsl(290, 25%, 15%)

This creates a tangible spatial hierarchy without relying on shadows that disappear on dark backgrounds.

Rule 3: Desaturate Your Colors for Dark Mode

Saturated colors that look great on white (#FF5733, #7C3AED) often feel aggressive and vibrating on dark backgrounds — a phenomenon called chromatic aberration. For dark mode, shift your accent colors towards lighter, more muted values.

For example, our primary brand color is hsl(298, 71%, 28%) on light backgrounds — a deep, rich purple. On dark backgrounds, we shift to hsl(298, 72%, 50%) — lighter and slightly more luminous, but not harsh. This adjustment is subtle but makes a dramatic difference in readability and visual comfort.

Rule 4: Typography Contrast — Not Maximum

WCAG AA requires 4.5:1 contrast for body text. But maximum contrast (pure white on pure black) is actually worse for readability in sustained reading — the high contrast causes halo effects around letters.

Our dark mode typography palette:

  • Primary text: #F5F5F5 (97% white) — high contrast without pure white harshness
  • Secondary text (labels, captions): #A1A1AA (zinc-400) — comfortable for supporting information
  • Disabled/placeholder: #71717A (zinc-500) — clearly deemphasized but still accessible

Rule 5: Test on Real Hardware

Browser DevTools dark mode simulation is unreliable. OLED screens render blacks differently than LCD — and most premium phones use OLED. Always test your dark mode on at least one OLED Android device and an iPhone (which also uses OLED). Colors will appear more vivid and blacks will be true black, which changes how your elevation system looks.

Practical Implementation

Use CSS custom properties (variables) for your entire color system, switching between light and dark palettes via a class on the html element. This gives you a single source of truth, smooth transitions, and easy maintenance. Avoid hardcoded hex values in component styles — if a future rebrand changes your primary color, you want to change it in one place.

Dark mode is a craft that improves with attention to detail. The teams that get it right aren't using magic — they're applying a systematic approach to color, elevation, and typography. These five rules will get you most of the way there.