Dark Mode

What is it?

Dark mode is an alternative color scheme that uses dark backgrounds with light foreground content. It is distinct from "inverted mode" — it is a purposefully designed alternative theme that requires its own color decisions, not just the same colors inverted. Modern operating systems and browsers support automatic dark mode detection via the prefers-color-scheme media query.

Why it matters

Dark mode is now an expected feature — Apple, Google, and Microsoft support it natively, and 82% of users (2020 Android Authority poll) use dark mode at least some of the time. More critically, dark mode reduces eye strain in low-light environments and extends battery life on OLED screens. Products that don't offer dark mode feel incomplete to many users.

Best Practices

• Use semantic color tokens that map to different primitives in dark mode — never use raw color values.
• Dark mode is not pure black — #0a0a0a or #111 works better than #000 (which creates too much contrast).
• Elevation in dark mode is expressed through lightness, not shadow — surfaces higher in the z-axis are slightly lighter.
• Images may need adjustment — very light images can feel harsh on dark backgrounds.
• Detect system preference with prefers-color-scheme and allow manual override stored in localStorage.
• Ensure all colors still meet contrast requirements in dark mode — inversion often breaks contrast.
• Test with real users who use dark mode — what looks good in a design tool looks different in context.
• Provide a manual toggle — users may want dark mode in specific contexts regardless of system setting.
• Dark mode shadows: reduce opacity, shift color toward the surface tone.
• CSS custom properties are the cleanest implementation — switch the token values on [data-theme="dark"].

Common Mistakes

• Pure black backgrounds (#000000) — too high contrast, causes visual fatigue.
• Inverting all colors blindly — destroys carefully tuned contrast ratios.
• Forgetting images, illustrations, and logos that only look right on light backgrounds.
• No manual toggle — relying solely on system preference.
• Dark mode that hasn't been tested for contrast — many elements fail WCAG in dark mode.
• Surfaces that all have the same background color — no depth or hierarchy.
• Third-party embeds (maps, payments) that don't support dark mode.

Checklist

Research & Theory

Real-World Examples