Dark Mode App Design: Colors, Contrast and Mistakes

This guide is for designers, developers and founders adding a dark theme to an iOS or Android app. Dark mode app design is not "invert the colours": it needs its own surface palette, adjusted accents and fresh contrast checks. You will get a token setup that works, the platform rules for iOS and Material 3, a step-by-step method for converting a light theme, and the mistakes that make dark themes look cheap or unreadable.

TL;DR: Use dark grey surfaces rather than pure black for most apps, show elevation by making surfaces lighter, and avoid pure white body text. Desaturate and lighten your accent colours, recheck every text pair against WCAG 4.5:1, and build both themes from semantic tokens so you are never hand-editing hex values per screen. Follow the system setting by default.

Why dark mode needs its own design

Users choose dark mode for comfort in low light, for battery savings on OLED screens, and simply because they prefer it. Both iOS and Android have had system-wide dark mode since 2019 (iOS 13 and Android 10), so users now expect apps to follow it.

The trap is assuming a dark theme is a colour swap. Three things behave differently on dark backgrounds:

1. •Shadows stop working. You cannot see a dark shadow on a dark surface, so depth needs another signal.
2. •Saturated colours vibrate. A bright brand blue that works on white can look harsh and fail contrast on near-black.
3. •Contrast flips in both directions. Pure white on pure black is extremely high contrast and can cause halation (text appearing to glow or smear), especially for people with astigmatism.

How iOS and Android approach dark mode

The lesson from both: rely on semantic roles, not literal colours. If your code says "background" instead of "#FFFFFF", dark mode becomes a second set of values rather than a rewrite.

Older Material guidance popularised #121212 as the dark surface colour, and it is still a reasonable starting point for custom palettes.

Build it with semantic tokens

Define roles once, then give each role a light and a dark value:

:root {
  --bg: #FFFFFF;
  --surface-1: #F5F5F7;
  --surface-2: #FFFFFF;
  --text-primary: #111114;
  --text-secondary: #5C5F66;
  --border: #E3E4E8;
  --accent: #2F5BEA;
  --on-accent: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --surface-1: #1B1C1F;
    --surface-2: #25262A;
    --text-primary: #ECEDEF;
    --text-secondary: #A3A6AD;
    --border: #33353A;
    --accent: #7C9BFF;
    --on-accent: #0B1330;
  }
}

These values are an example, not a standard — test your own. Notice the patterns: the dark background is not pure black, surfaces get lighter as they rise, body text is off-white, and the accent is lighter and softer with dark text on top of it.

Step-by-step: converting a light theme to dark

1. •List your colour roles. Background, 2–3 surface levels, primary and secondary text, disabled text, borders, accent, accent text, success, warning, error. If your light theme uses 30 raw hex values, consolidate them into roles first.
2. •Pick the base background. Choose a dark grey with a hint of your brand hue, or pure black if you have a specific reason (see below).
3. •Create the elevation ramp. Each step up (cards, sheets, dialogs, menus) gets slightly lighter. Three or four steps is enough.
4. •Set text colours. Primary text off-white, secondary text a mid-grey, disabled text lower still. Material's long-standing guidance expressed this as white at roughly 87%, 60% and 38% opacity for high, medium and disabled emphasis.
5. •Adjust accents. Lighten and slightly desaturate the brand colour until it reaches at least 4.5:1 against the background for text, or 3:1 for large text and UI components. Put dark text on accent-filled buttons if white fails.
6. •Fix status colours. Red, green and amber need lighter, softer dark-mode versions; pure #FF0000 on dark grey is harsh.
7. •Replace shadows. Use lighter surfaces, subtle borders, or both, to separate layers.
8. •Handle images and illustrations. Provide dark variants of illustrations with light backgrounds, reduce the brightness of large photos slightly if they dominate, and make sure logos with dark text have a light-on-dark version.
9. •Check every pair. Run text and icon colours against their actual surfaces in the contrast checker. Do this on each elevation level, not just the base.
10. •Test on real devices in a dim room and in daylight. OLED and LCD screens render near-black differently.

Pure black or dark grey?

A common compromise: dark grey by default, with an optional "true black" setting for OLED fans.

Contrast targets

WCAG 2 contrast requirements apply equally in dark mode:

Dark themes most often fail on secondary text, placeholder text, disabled-looking but active controls, and thin borders. The newer APCA method, which the contrast checker also supports, models dark backgrounds more accurately than WCAG 2 and is worth checking alongside it.

Common dark mode mistakes

• •Pure white text on pure black for long reading. Use off-white, or a dark grey background.
• •Unchanged brand colours. The light-mode accent usually fails or glares. Make a dark variant.
• •Drop shadows as the only depth cue. They disappear. Use surface lightness.
• •Hard-coded colours in a few screens, which stay bright white in dark mode. Audit for literal hex values.
• •Images with white backgrounds (product shots, illustrations, charts) that flash on a dark screen.
• •Status bar mismatch: dark content in the status bar on a dark background, making the time unreadable.
• •Forgetting system UI: keyboards, date pickers, alerts and web views should follow the theme too.
• •No way to choose. Offer System, Light and Dark in settings — our settings screen design guide shows where appearance options belong.
• •Charts with light-mode colours. Data colours need their own dark palette with adequate contrast between series.

Real-world patterns worth studying

• •Spotify is dark by default; it uses dark greys and lets album art supply the colour, with its green reserved for key actions.
• •Apple's apps (Music, Notes, Settings) show iOS's approach: black base, grey elevated surfaces, and system colours that shift slightly brighter in dark mode.
• •Google's apps use Material 3's tonal surfaces and dynamic colour, so the dark theme carries a subtle tint from the user's wallpaper.
• •Finance and crypto apps often lean dark to make charts pop — see the floow dark mode crypto wallet template for an example layout.

Dark mode checklist

• •Every colour on every screen comes from a semantic token.
• •Background is a considered choice (dark grey or black), not an accident.
• •Elevation steps get lighter, with three or four levels.
• •Body text is off-white; secondary and disabled text pass contrast.
• •Accent, status and chart colours have dark-specific values.
• •Illustrations, logos and images have dark-friendly variants.
• •Status bar, keyboard and system controls match the theme.
• •The app follows the system setting and offers a manual override.

To build your palette, start with how to choose a mobile app color palette, or pull colours from a reference image with the colour picker from image, then derive the dark values from those roles. You can also generate both themes of a screen in floow and compare them side by side before committing to tokens.

FAQ

Should dark mode use pure black?

Not usually. Dark grey surfaces reduce glare, show elevation better and reduce smearing on OLED screens. Pure black works for media-heavy apps or when you follow iOS system styling closely, and some apps offer it as an optional "true black" setting.

What is the best background color for dark mode?

A dark grey, often with a slight tint of your brand hue, is the safest choice. Material's widely used reference is #121212. Whatever you choose, build lighter steps above it for cards, sheets and dialogs.

How do you check contrast in dark mode?

Test every text and icon colour against the exact surface it sits on, at each elevation level, using a WCAG contrast checker. Aim for at least 4.5:1 for body text and 3:1 for large text and UI elements. APCA gives a useful second opinion on dark backgrounds.

Should my app follow the system dark mode setting?

Yes, by default. Users set it once and expect apps to respect it. Add an in-app choice of System, Light and Dark for people who want a different theme in your app.

Design it with floow

Generate a screen in both themes from the same tokens and refine the colours in chat. Try this prompt in floow: "Design a music player app home screen for iOS in dark mode: dark grey background, three elevation levels, off-white text, a softened violet accent, and album art as the main colour."