Designing for Dark Mode: A Complete Guide

Dark mode has evolved from a trendy feature to an expected standard. Users demand it, and when implemented well, it reduces eye strain and saves battery on OLED screens. But dark mode is not simply inverting your colors — it's a parallel design system that requires careful attention.

The Myth of Simple Inversion

The biggest mistake teams make is inverting their light mode colors and calling it dark mode. This creates visual discomfort, reduces readability, and can cause eye strain. Here's why simple inversion fails:

Equal luminance causes vibration — Bright text on dark backgrounds vibrates and becomes hard to read
Pure black (#000000) is too harsh — It creates too much contrast with white text
Shadows disappear — Dark-on-dark shadows are invisible, removing depth cues

Building a Dark Color Palette

Start with a dark background that isn't pure black. Use a dark gray with a slight hue tint that matches your brand:

Background: #1A1A2E or #121212 (not #000000)
Surface cards: #2A2A3E (slightly lighter than background)
Elevated surfaces: #3A3A4E (for modals, dropdowns)
Primary text: #EAEAEA (not pure white)
Secondary text: #A0A0B0 (reduced opacity for less emphasis)

The key principle: reduce the luminance of your colors as you move from background to text. Dark backgrounds should be dark, but elements should progressively get lighter as they come "closer" to the user.

Handling Elevation and Depth

Without shadows, you need alternative ways to show elevation in dark mode:

Lighter surfaces for elevated elements — Cards sit on top because they're lighter, not because they cast shadows
Subtle borders — Use 1px borders at 10% white opacity to define boundaries
Background tinting — Overlay a subtle white tint on active elements
Drop shadows with a light source — If you use shadows, they should be light-colored (the shadow is actually a glow from above)

/* Light mode shadow */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark mode — light source from above */
.dark .card {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}

Image and Media Considerations

Images and media often look too bright in dark mode. Reduce their intensity:

Lower image brightness by 10–20%
Add a subtle dark overlay on images with text
Avoid pure white backgrounds in images — tint them dark
Use CSS filters to adjust media: filter: brightness(0.8)

Testing Your Dark Mode

Test dark mode in real conditions:

View on the actual devices your users have
Test in different lighting conditions (bright room vs. dark room)
Check color contrast ratios — dark mode requires the same 4.5:1 ratio as light mode
Verify that icons and illustrations are visible
Test with users who have visual impairments

Conclusion

Dark mode is not an afterthought — it's a first-class design experience. Invest the time to build a proper dark palette, handle elevation without relying on shadows, and test thoroughly. When done right, your users will thank you every night.

Designing for Dark Mode: A Complete Guide