Dark mode reduces eye strain in low light, saves battery on OLED screens, and creates a premium aesthetic. But poorly implemented dark mode — simply inverting colors — creates accessibility nightmares and visual discord.
Why Users Love Dark Mode
81% of smartphone users enable dark mode. Benefits: reduced eye strain in low-light environments, 30-40% battery savings on OLED screens, reduced blue light exposure for evening use, perceived premium aesthetic, and reduced screen glare. For developers: dark mode tests your design system's flexibility — if it works in dark mode, your architecture is solid.
Color Science for Dark Interfaces
Never use pure black (#000000) — it creates excessive contrast and halos around text. Use dark grays (#121212 to #1E1E1E) for backgrounds. Reduce color saturation by 20-30% (vibrant colors that work on white are garish on dark backgrounds). Use lighter variants of brand colors. Ensure text on dark backgrounds uses slightly lower opacity (87% white, not 100%) for comfortable reading.
Elevation Through Luminance
In light mode, depth is shown with shadows. In dark mode, shadows are invisible against dark backgrounds. Instead, use luminance: higher surfaces are lighter. Material Design's elevation system: surface at #121212, elevated cards at #1E1E1E, dialogs at #2C2C2C, and tooltip layers at #363636. This creates clear visual hierarchy without relying on shadows.
Accessibility in Dark Mode
Contrast requirements are different in dark mode: text must maintain 4.5:1 contrast ratio (but against dark, not light backgrounds), colored elements need different contrast validation, focus indicators must be visible against dark surfaces, and error/success states need dark-mode-specific variants. We audit dark mode accessibility separately from light mode.
Image & Media Handling
Images that look great in light mode can overpower dark interfaces. Solutions: reduce image brightness by 10-15% in dark mode, add subtle dark overlay on full-bleed images, provide dark-mode-specific illustrations, use transparent PNGs that work on any background, and ensure logos have dark/light variants.
Technical Implementation
CSS: use prefers-color-scheme media query with CSS custom properties for all colors. JavaScript: detect system preference and provide manual toggle. Persistence: save preference in localStorage. Transition: smooth 200ms transition when switching. Consider: dark mode as default for evening sessions (time-based detection).
Conclusion
Dark mode design is a distinct discipline — not an afterthought or an inversion. By understanding the color science, elevation system, and accessibility considerations unique to dark interfaces, you create experiences that users actively prefer.