Dark mode isn't "invert the colors and ship it." I've seen apps try that. The results look like photo negatives—harsh, hard to read, and uncomfortable.

Good dark mode design requires deliberate choices. This guide covers what actually matters.

Why dark mode exists

A few reasons, and they affect design decisions:

Battery life on OLED screens. Black pixels are literally off on OLED displays. Apps with true black backgrounds use less power. This matters for phones.

Reduced eye strain in low light. Staring at a bright white screen in a dark room hurts. Dark mode reduces that contrast.

User preference. Some people just prefer it. They'll use dark mode in broad daylight. That's fine—design for them too.

Aesthetic choice. For certain apps (music, movies, photography) and industries like fintech, dark themes feel more premium and let content pop.

The core principle: It's not about black

Here's what trips up most dark mode designs: pure black (#000000) is usually wrong.

Pure black creates too much contrast with white text. It looks harsh. It doesn't feel like a natural environment.

Instead, use dark grays. Twitter uses #15202B. Spotify uses #121212. Discord uses #36393F. These feel softer while still being "dark."

Common dark mode background colors:

#000000 ← Too harsh for most UIs
#0D0D0D ← Very dark, works for true black themes
#121212 ← Spotify's approach, warm dark gray
#1A1A2E ← Slight blue tint, common in tech apps
#1E1E1E ← VS Code's background
#2D2D2D ← Even lighter, good for cards on dark bg

The exception: apps where true black makes sense aesthetically, like camera apps or media players where you want the content to float on "nothing."

Try dark mode designs: Generate dark-themed app screens instantly — just mention "dark mode" in your prompt and GenDesigns handles the color adjustments automatically.

Color adjustments for dark mode

You can't use the same colors from light mode. Here's what changes. For a full primer on building color systems, see our mobile app color schemes guide.

Background hierarchy flips

In light mode, you create depth by making surfaces darker (white → light gray → darker gray).

In dark mode, you create depth by making surfaces lighter (dark gray → medium gray → lighter gray).

Light mode elevation:
Background: #FFFFFF (white)
Card: #F5F5F5 (light gray)
Elevated: #EEEEEE (medium gray)

Dark mode elevation:
Background: #121212 (dark gray)
Card: #1E1E1E (medium dark)
Elevated: #2D2D2D (lighter dark)

Higher surfaces are lighter in dark mode. This mimics how light works in physical space.

Primary colors need adjustment

Your bright blue button that looks great on white? It'll vibrate uncomfortably on dark gray.

Reduce saturation slightly for dark mode. Keep hue the same, but pull back intensity.

Light mode blue: #2196F3 (bright, saturated)
Dark mode blue: #64B5F6 (lighter, less saturated)

Light mode green: #4CAF50
Dark mode green: #81C784

Light mode red: #F44336
Dark mode red: #EF5350

The goal: colors should feel equally prominent in both modes without straining the eyes.

Text colors

White text on dark backgrounds needs attention too.

Primary text: Not pure white. Use #E1E1E1 or similar. Pure white (#FFFFFF) is too harsh on dark backgrounds and can cause halation (glowing effect) for some users.

Secondary text: Around #A0A0A0 to #B0B0B0. Needs enough contrast to be readable but clearly subordinate.

Disabled/tertiary text: Around #666666 to #757575. Still visible but obviously inactive.

Check contrast ratios. WCAG recommends 4.5:1 for normal text, 3:1 for large text.

Images and media

Photos

Photos generally look fine in dark mode without modification. The dark UI frames them nicely.

Some apps slightly reduce image brightness in dark mode (10-15%). This prevents jarring bright flashes when scrolling through content. Instagram does this subtly.

Illustrations

If your app uses illustrations, you might need dark mode variants. A character on a white background looks weird floating on dark gray.

Options:

Create dark mode illustration variants
Use illustrations with transparent backgrounds
Add subtle dark overlay to illustrations

Icons

Outline icons work well in dark mode. Just swap the stroke color.

Filled icons might need more work. A filled red heart on white becomes a filled lighter-red heart on dark.

For system icons, use the platform's adaptive icon colors (SF Symbols on iOS auto-adjust for dark mode).

Component-by-component decisions

Cards and containers

Don't use borders to define cards in dark mode. Use background color differences instead. Borders feel harsh and dated.

Light mode card: white background, subtle shadow
Dark mode card: #1E1E1E background on #121212 base

Inputs and forms

Text fields need visible boundaries. In dark mode, use slightly lighter backgrounds rather than borders.

Dark mode input:
Background: #2D2D2D
Text: #E1E1E1
Placeholder: #757575
Focus: Subtle primary color glow or border

Navigation

Bottom tabs work well with icons that have obvious dark mode states. Active states might use a colored fill or background highlight instead of the same bright colors from light mode.

Toggles and controls

Switches, checkboxes, and sliders should use your adjusted primary color. The "off" state uses neutral grays.

Alerts and status messages

Error red, warning yellow, success green—all need to work on dark backgrounds. Usually this means lighter, less saturated versions.

Light mode error: #D32F2F (dark red)
Dark mode error: #EF5350 (lighter red)

Light mode success: #388E3C (dark green)
Dark mode success: #66BB6A (lighter green)

Implementation approaches

System-level dark mode

Most apps should respect the system preference. When users enable dark mode at the OS level, your app follows.

Both iOS and Android provide APIs for detecting this. React Native, Flutter, and other cross-platform frameworks support it.

In-app toggle

Some apps offer independent dark mode control. Useful when:

Your app's content dictates the theme (photo editing apps)
Users might want different settings than their phone default
You support additional themes beyond light/dark

Auto-switching

Switching based on time of day or ambient light. Sounds clever but usually annoying. Let users control it.

Testing dark mode properly

Test on real devices

Dark mode looks different on OLED vs LCD screens. Test on both. OLED shows true black; LCD shows dark gray.

Test in actual dark environments

View your dark mode in a dark room. Bright spots that seemed fine in daylight become glaring.

Test all states

Empty states, error states, loading states—every screen needs dark mode consideration. It's easy to miss a screen that's rarely seen.

Test with different content

User-generated content (profile photos, uploaded images) can clash with your dark theme. Scroll through real content, not just design mocks.

Common dark mode mistakes

Pure black everywhere

Creates harsh contrast and eye strain. Use dark grays instead.

Just inverting colors

Automatic inversion creates weird results. Photos become negatives. Colors shift unpredictably. Don't do this.

Forgetting shadows

Light mode shadows don't work on dark backgrounds. They become invisible or look like glitches. Use lighter surfaces for elevation instead.

Inconsistent text colors

Mixing pure white with off-whites looks sloppy. Pick a text color palette and stick to it.

Ignoring semantic colors

Error red needs to be visible and feel like an error. Warning yellow needs to read as caution. Don't let dark mode make these colors muted to the point of losing meaning.

Only testing in mockups

Your Figma looks great. But did you test on a phone in a dark room? With realistic content? While scrolling quickly?

Dark mode in GenDesigns

When generating designs, specify dark mode:

Design a fitness tracking app with dark mode.
Near-black background (#121212), white text, green accent for progress indicators.
Include: dashboard, workout detail, and settings screens.

Or generate both modes:

Design a notes app with both light and dark theme options.
Light: white background, navy accents
Dark: dark gray background (#1E1E1E), adjusted navy accents

Show the same home screen in both themes.

The AI understands dark mode conventions and will apply appropriate color adjustments. You can also generate both light and dark variations in a single session to compare them side by side.

When to default to dark mode

Some apps should launch in dark mode:

Media apps (video, music, photo editing): Dark frames content better
Night-use apps (sleep trackers, bedtime stories): Bright screens defeat the purpose
Developer tools: Most developers prefer dark themes
Gaming: Dark creates immersion

Most other apps should follow system preference by default, with an option to override.

The bottom line

Dark mode is a parallel design system, not a filter you apply. It requires intentional choices about color, contrast, and hierarchy.

The good news: once you understand the principles, dark mode actually becomes easier than light mode in some ways. You have more flexibility with accent colors, photos pop more naturally, and the hierarchy of lighter surfaces is intuitive.

Start with these principles, test thoroughly, and iterate based on real device testing. Your users' eyes will thank you.

Related reading:

Mobile App Color Schemes 2026 - Color theory for mobile
App Typography Guide: iOS vs Android - Font best practices
Mobile UI Patterns 2026 - Practical design reference