Dark Mode Design: Best Practices and Common Mistakes

Dark mode is now an expectation on phones, laptops and many websites. People enable it to reduce glare in dim settings, to save battery on some displays and simply because they prefer the look. But a good dark theme is not an inverted light theme. It needs its own decisions about color, contrast, depth and imagery.

This guide covers the practices that separate a comfortable dark interface from a harsh or unreadable one.

Why offer dark mode

• Comfort in low light for many users
• Battery savings on OLED screens, in some conditions
• Preference and accessibility. Some people find light backgrounds uncomfortable, though others, including some with certain visual conditions, read light-on-dark text less easily, so offering a choice matters.
• Platform expectation. iOS, Android, macOS and Windows all have system-wide settings.

Support the system preference and, ideally, let users override it inside your product.

1. Avoid pure black and pure white

Pure black backgrounds with pure white text create very high contrast that can cause eye strain and a glowing, vibrating effect (halation).

• Use a very dark grey or a dark tint of your brand color for the base background, such as #121212 or similar
• Use off-white or light grey for primary text instead of #FFFFFF
• Reserve pure white for small highlights if at all

Some OLED-focused designs use true black deliberately, so consider it only if it suits the product.

2. Build elevation with lighter surfaces

In light interfaces, shadows show depth. In dark ones, shadows barely show. Instead, raise surfaces by making them slightly lighter.

• Base background: darkest
• Cards, sheets and menus: slightly lighter
• Modals and floating elements: lighter still

Define these as named surface tokens in your design system.

3. Keep contrast accessible

Dark mode does not exempt you from contrast rules.

• Text should still meet 4.5:1 (normal) or 3:1 (large) against its background
• Check secondary text, placeholders, borders and disabled states. These often fall below the threshold in dark themes.
• Do not make body text so dim that it becomes hard to read

See colour theory for UI and accessibility basics.

4. Tone down saturation

Highly saturated colors that look good on white can look harsh and vibrate on dark backgrounds.

• Use lighter, slightly desaturated versions of your brand and accent colors for dark mode
• Retest semantic colors (success, warning, error) for legibility
• Avoid large areas of bright color

Define separate color values for each theme rather than reusing the exact light-mode values.

5. Handle images, icons and illustrations

• Photos generally work as they are, but very bright images can feel glaring. Consider a subtle overlay or reduced brightness where appropriate.
• Logos and icons designed for light backgrounds may disappear. Provide light or inverted variants.
• Illustrations with white backgrounds may need new versions or transparent backgrounds.
• Screenshots and charts need readable lines, labels and fills against the dark surface.
• Avoid pure white boxes in the middle of a dark screen.

6. Treat borders and dividers carefully

Thin, light-grey dividers can look too strong against dark surfaces. Use low-contrast, semi-transparent lines to separate sections without creating visual noise, but ensure form field borders still meet the 3:1 requirement for interface components.

7. Respect system settings

Implement the preference with CSS:

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e6e6e6;
  }
}

On mobile, follow the platform’s appearance APIs. If you add a manual toggle (light, dark, system), remember the user’s choice, and apply the theme early to avoid a flash of the wrong theme on load.

8. Test in real conditions

• View screens in a dark room and in daylight
• Test on OLED and LCD displays, which render dark tones differently
• Check every state: hover, focus, pressed, disabled, error and success
• Test third-party components and embedded content for unthemed light patches
• Include dark mode in your QA checks

Common mistakes

• Simply inverting colors
• Pure black with pure white text
• Forgetting focus and disabled states
• Leaving light-theme logos and images unchanged
• Using shadows to show depth
• Not testing contrast

Checklist

• Off-black base and off-white text
• Elevation shown through lighter surfaces
• All text and UI components meet contrast ratios
• Brand and semantic colors adjusted for dark backgrounds
• Logos, icons and images checked
• System preference supported, with optional manual override
• No flash of the wrong theme on load
• Tested on multiple screens and lighting conditions

Final thoughts

A thoughtful dark theme feels calm, readable and consistent. Treat it as its own design, built from a token system, and test it as carefully as the light version. For help creating theme-ready interfaces and design systems, see our UI/UX design service or contact us.