---
title: Dark Mode Done Right a Step by Step Guide for App Developers
description: A practical guide to app dark mode design covering palettes, contrast, brand colours, accessibility and keeping iOS, Android and web themes in sync.
image: https://weareaffective.com/hubfs/learning-centre-images/dark-mode-done-right-a-step-by-step-guide-for-app-developers.webp
---

[Skip to content](https://weareaffective.com/learning-centre/dark-mode-done-right-a-step-by-step-guide-for-app-developers#main-content)

[![we\_are\_affective\_logo\_200](https://weareaffective.com/hs-fs/hubfs/we_are_affective_logo_200.png?width=175&height=48&name=we_are_affective_logo_200.png "we_are_affective_logo_200")](https://weareaffective.com)

- [Home](https://weareaffective.com)
- About Us 
  
    - [Our Story](https://weareaffective.com/about)
    - [How We Work](https://weareaffective.com/how-we-work)
- Our Services 
  
    - [App Planning & Strategy](https://weareaffective.com/app-planning-strategy)
    - [App Design](https://weareaffective.com/app-design-agency)
    - [App UX Design](https://weareaffective.com/app-ux-design)
    - [App UI Design](https://weareaffective.com/app-ui-design)
    - [App Technical Architecture](https://weareaffective.com/app-architecture)
    - [Existing App Audits](https://weareaffective.com/app-audit)
- [Case Studies](https://weareaffective.com/case-studies)
- [Pricing](https://weareaffective.com/pricing)
- [Learning Centre](https://weareaffective.com/learning-centre)

- [Get Started](https://weareaffective.com/get-started)

Expert Guide Series

# Dark Mode Done Right a Step by Step Guide for App Developers

 Table of Contents

We worked on a healthcare and health insurance product built for African markets, and we chose a dark interface before we chose almost anything else. Green undertones, simplified language, no cold clinical white anywhere. The dark was the product. That project is a good way into [app dark mode design](https://weareaffective.com/app-ui-design), because every decision you make in the dark changes how the thing feels, not just how it looks.

> A dark theme is a second product, and it deserves a second design process.

Most dark themes get built late, by someone inverting the light palette and fixing whatever screams. The result reads flat, the brand colour buzzes, and the shadows that carried your hierarchy quietly stop existing. Users notice within a few screens, even if they can't say why.

This guide walks through the work in order, from why people reach for the setting in the first place, through palette, depth, contrast, brand colour, states, imagery, accessibility and platform implementation, and then how to keep both themes honest after launch. It's written for developers and designers who already have a light theme shipping and want the dark one to be as considered.

## Why Users Turn Dark Mode On (and When They Turn It Off)

People turn dark mode on for comfort, mostly. Reading in bed, checking something in a dim room, a long session where white screens start to sting. In a 2026 mobile interface study reported by [Browserstack](https://www.browserstack.com/guide/how-to-test-apps-in-dark-mode), 68.4% of the 215 participants surveyed said they preferred dark mode in mobile apps, with visual comfort and reduced eye strain in low light among the reasons given. It's a stated preference rather than observed behaviour, so treat it as a signal about how people feel, which is the part we care about anyway.

The switch-off moments are more interesting. People go back to light when they can't read something, when a photo looks wrong, when a form feels harder than it did yesterday. Bright sunlight sends them back too, because a dark screen outdoors gives you less to work with.

#### What the setting actually signals

Someone choosing dark mode is usually telling you something about their context. They're winding down, or they're concentrating, or the room is quiet. That's a different emotional state from the mid-morning commute, and your interface can acknowledge it with calmer motion, softer accents and less visual shouting. Dark mode design that treats the dark theme as the same product with different hex codes misses what the user just told you.

## The Inversion Trap: Why Flipping Your Light Theme Fails

Inversion sounds reasonable. Dark background, light text, swap the greys, ship it. Then you look at a screen and everything sits on the same plane, the primary button glows like a warning light, and the body copy vibrates slightly when you read more than a paragraph.

Light and dark don't behave the same way. On a light screen, darker means closer and heavier, so shadows and dark text do your hierarchy for you. In the dark, lighter means closer. If you invert, your hierarchy runs backwards, and the elements you wanted to recede are now the brightest things on the screen.

Colour breaks too. A saturated brand red that reads confident on white reads aggressive on near-black, because the surrounding darkness pushes its apparent brightness up. Mid greys that separated two sections at a glance collapse into each other. Your disabled states and your secondary text end up the same value.

#### Three things inversion always breaks

1. Elevation, because the shadow language stops being visible.
2. Accent colour, because saturation climbs against a dark field.
3. Greyscale steps, because the gaps that worked going down don't work going up.

So the honest starting point is a blank file. Keep the structure, keep the type scale, keep the spacing, and rebuild the colour from the background up.

## UX/UI design built around *real* psychology

We design app interfaces around how people actually think and behave. User research, psychology-driven UX/UI design and technical specs delivered as one complete package.

[See how we work](https://weareaffective.com/how-we-work) [Get started](https://weareaffective.com/get-started)

No commitment

## Building a Dark Palette from the Ground Up

Start with the background, because everything else is judged against it. Pure black is rarely the right answer for a full interface, since text on it creates a harsh edge and you lose the room to build lighter surfaces above it. A very dark grey with a hint of colour in it gives you somewhere to go.

#### Where app dark mode design starts

On the healthcare and health insurance product we built for African markets, the undertone did the emotional work. We wanted green in the dark surfaces because green reads as calm, safe and medical, and people were often arriving at that product worried about something. The screens are dark, the undertone is green, and the feeling is looked after rather than examined.

> Choose the undertone of your darkness before you choose a single accent colour.

From there, build in steps rather than picking colours one screen at a time.

1. Set the base background, somewhere around 8 to 12% lightness.
2. Build four or five surface steps above it, each a small, even jump.
3. Set text values as a ladder, from primary down to hint, all tested on every surface.
4. Add one accent, adjusted for the dark field, then a second only if you need it.
5. Add the state colours last, so they sit inside the system instead of fighting it.

## Creating Depth and Hierarchy Without Shadows

Drop shadows work in the light because they darken the background behind an object. In the dark there's nothing left to darken, so a shadow reads as a vague smudge or disappears entirely. You get depth back by making things lighter as they come forward.

Think of it as a stack. The page sits at the bottom, cards lift off it slightly, sheets and dialogs lift further, and menus float highest. Each step is small, and the steps stay consistent across every screen so people learn the language without being told.

| Level | Surface value | Used for |
| --- | --- | --- |
| Base | #121212 | Page background |
| Raised | #1C1C1E | Cards, list rows, input fields |
| Floating | #242428 | Bottom sheets, dialogs, pickers |
| Top | #2C2C30 | Menus, tooltips, toasts |

Borders and dividers help too, as long as they're quiet. A one-pixel line at low opacity white separates two surfaces that sit close in value, and it does the job that a shadow did in the light theme. Keep a small glow under floating elements if you like, used as a hint rather than a statement.

Spacing carries more weight in the dark as well. When your value steps are subtle, generous padding and clear grouping stop the screen reading as one grey slab.

## Contrast Ratios, Halation and Readable Text

Dark backgrounds don't buy you looser rules. WCAG 2.1 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, counting 18pt and above or 14pt bold and above, and those thresholds apply the same way in both themes, as set out by the [W3C](https://www.w3.org/TR/WCAG21/). Check every text value against every surface in your stack, not only against the base background.

Then there's the opposite problem. Pure white text on pure black runs too hot, and for people with astigmatism the letters bloom and smear slightly, which is called halation. Long paragraphs become tiring, and the tiredness arrives before anyone identifies the cause.

The fix is to pull both ends in a little. Use an off-white for primary text, somewhere around 87% white, a quieter value for secondary text, and a near-black rather than true black behind it. You keep plenty of contrast and lose the glare.

Set your body text slightly lighter in weight for the dark theme. Light type on a dark field looks heavier than the same weight on white, so a regular that works in the light often wants to be a light or a slightly reduced optical weight in the dark.

Line length and line height matter more here too. Tight leading that reads fine on white starts to feel cramped when the letters are glowing against a dark page, so give the text a bit more air.

## Adapting Brand Colours for Dark Backgrounds

Brand colours are tuned for white. Move them onto near-black and they jump in apparent saturation, which is why a confident brand blue turns into a neon strip and a warm coral starts to look radioactive. The colour hasn't changed, the surroundings have.

The adjustment is usually the same shape. Drop saturation, raise lightness, and keep the hue close enough that it still reads as yours. A dark theme accent that sits around 60 to 70% of the original saturation and a few steps lighter will feel like the same brand without burning a hole in the screen.

The brand has to survive the switch emotionally as well as visually. We worked on a mobile app in the health and wellness genetics sector where the packaging and the online presence were luxurious and aspirational, all about becoming a better version of yourself, and the app itself was cold, clinical and purely functional. Somebody read the aspirational marketing, ordered a kit, did the test, opened the app, and the whole feeling fell over at the last step. A dark theme can repeat that mistake in one release if it's treated as a technical variant.

#### A simple check before you commit

Put the light screen and the dark screen side by side, cover the logos, and ask whether both belong to the same company. If only one of them feels like the brand you've been building, the colour work isn't finished.

## What Your Colour Choices Say About Your Sector

Different colours psychologically evoke different feelings, and people read them without deciding to. Green is calming. Blue is more clinical. Red is passionate and driven. That's why so many gaming products live in blacks and blues, medical apps go greens and whites, and finance leans blue almost as a default.

Dark mode ui amplifies this, because with less colour on the screen, the colour you do use carries more. One accent against a near-black field is making a statement about who you are, whether or not you meant it to.

> In the dark, a single accent colour carries most of what your brand feels like.

Here's how that tends to play out across the lifestyle categories we work in.

| Sector | Dark palette that fits | Feeling it carries |
| --- | --- | --- |
| Beauty and skincare | Warm near-black, soft blush or gold accent | Considered, quiet luxury |
| Wellness and supplements | Green undertone, muted sage accent | Calm, safe, looked after |
| Fitness and activewear | Cool charcoal, one high-energy accent | Driven, focused |
| Travel and hotels | Deep navy, warm cream type | Evening, arrival, rest |

None of that is a rule you have to follow. It's a reminder that your palette is already saying something, so it's worth deciding what.

## The Emotional Tone of a Dark Interface

Dark interfaces carry a mood before anyone reads a word. They can feel premium, private, calm, or they can feel heavy and a bit joyless. The difference sits in the undertone, the accent and the pace of everything on top.

On the healthcare product for African markets, the dark approach was chosen to destress people rather than add to their anxiety. The green undertones softened it, and the language was stripped right back, with the medical jargon taken out so people weren't decoding terms while they were already worried. The interface was quiet at them, and they settled.

Headspace does a version of this in onboarding. The illustrated character is being calm at you, and you mirror it. Copy almost never achieves that on its own, because telling someone to relax rarely relaxes them.

So when the theme goes dark, go through the rest of the product with the same question. Motion can slow slightly. Sounds and haptics can soften. Copy can lose its exclamation marks. When emotion guides these calls from the start, everything gets more purposeful, because you're engineering how people feel about the screen and not only what they do with it.

## Error, Warning and Success States in the Dark

State colours are where dark themes fail loudest. The red that reads urgent on white turns into a glare, the amber loses its warning quality and starts to look decorative, and the success green drifts towards the same value as your accent.

Rebuild each one as a pair. A lighter, desaturated colour for the text and icon, and a very dark tinted surface behind it for the container. A red error message at around 70% saturation on a deep maroon-tinted panel stays urgent and stays readable, which the inverted version rarely does.

Colour alone was never enough anyway. Around 8% of men have some form of colour vision deficiency, according to [Lollypop Design Studio](https://lollypop.design/blog/2026/june/trading-app-design/), and a red and green that read as obviously different to you can land as two similar greys to them. Dark backgrounds narrow the gap further.

- Pair every state colour with an icon shape that's different at a glance.
- Say what happened in words, so the colour is confirming the message rather than carrying it.
- Keep the text in states at full readable contrast, including inside tinted containers.
- Test each state on every surface level, since a toast floats higher than a card.

Then check the states against each other on one screen. Three at once is where the palette tells you the truth.

## Imagery, Icons and Illustration That Survive the Switch

Photography is the first casualty. Shots with white or near-white backgrounds, which look clean on a light page, turn into glowing rectangles in the dark. Product photography for beauty or home and interiors often arrives cut out on white, and that's the set you'll need to revisit.

There are a few ways through. Cut-out imagery on transparent backgrounds works across both themes. Where you can't re-shoot, a slight reduction in brightness and a dark rounded container around the image softens the jump. Hero imagery sometimes wants a different crop altogether in the dark theme.

Audit your SVGs for hardcoded black. Icons drawn with a fixed fill disappear completely on a dark surface, and this is the single most common bug teams find on the day they ship a dark theme.

Illustration needs the same care. Fine line work drawn for white gets lost, and flat fills chosen for a bright page lose their relationship to each other. Thicken the strokes slightly, lift the fills, and keep the character of the illustration intact so the product still feels like itself.

Logos are worth a specific decision. A one-colour reversed version usually beats putting a white box behind the full-colour mark, which looks like a patch stuck onto the screen.

## Accessibility Beyond the Contrast Checker

Passing the contrast checker is the floor. We worked on a document portal for the film industry used by a lot of different people, often moving fast on set, and accessibility there had nothing to do with ticking boxes. The design was large-scale and easy to move around, and everything about it was about getting to the information as quickly and simply as possible.

That same thinking applies to a dark theme. Someone using your app at night is often tired, sometimes one-handed, sometimes in a moving vehicle. Touch targets, spacing and plain language carry more weight in those conditions than another half point of contrast ratio.

> Accessibility in the dark is about how fast someone finds what they need, not just whether the text passes.

A few things slip through the automated checks every time. Focus rings drawn in a colour that only worked on white. Placeholder text that passes on the base background and fails inside a raised input. Charts where the data series separated by hue alone become indistinguishable. Disabled controls so dim that nobody can tell they exist.

Run your screen reader through the dark theme as well. Theme-specific components sometimes ship with labels nobody wrote, because they were built in a hurry after the light version was signed off.

## Implementing Dark Mode Across iOS, Android and Web

All three platforms give you the system hooks, so the work is mostly about how your tokens are structured rather than how the switch gets detected. iOS has semantic colours and trait collections, Android has theme attributes and Material's elevation overlays, and the web has the prefers-color-scheme media query with CSS custom properties.

1. Name every colour token by role, so you have surface-raised and text-secondary rather than grey-200.
2. Define both theme values against each token in one place, then let the platform pick.
3. Follow the system setting by default, and offer a manual override for people who want it.
4. Store the user's choice so it survives a restart.
5. Handle the in-session switch, since people do change the setting with your app open.

Watch the edges. Splash screens, status bars, web views, email templates, PDF exports and third-party SDK screens all sit outside your theme system and all flash white at exactly the wrong moment.

True black backgrounds on OLED and AMOLED screens save power, with [PCloudy](https://www.pcloudy.com/blogs/test-dark-mode-across-devices/) putting the extension at 30 to 60%. That applies only to those screen types, and true black brings the halation problem back, so it's a trade worth making deliberately rather than by default.

## Testing in Real Conditions Before You Ship

Dark themes look fine on a studio monitor at midday. They fall apart in the conditions people actually use them in, which is why the test plan has to leave the desk.

1. Outdoors in direct sunlight, at mid and low screen brightness.
2. In a dark room, straight after waking, with the screen at its dimmest.
3. On an OLED phone and an LCD phone side by side, since the blacks differ.
4. With night shift or blue light filters turned on, which shift your whole palette warm.
5. With the system switching themes mid-session, to catch anything that doesn't repaint.

Print nothing, screenshot everything. Build a single contact sheet of every screen in both themes at the same scale, and the inconsistencies you've stopped seeing one screen at a time become obvious in thirty seconds.

Then play it back to people. When we propose something and show it to a client, the reaction is immediate, because fundamentally everyone here is a user of these products too. Asking a client how the dark version feels to them is a natural validation step, and it sits alongside [proper user testing rather than replacing it](https://weareaffective.com/learning-centre/what-types-of-testing-does-your-mobile-app-actually-need).

Look for hesitation more than opinion. Someone pausing before they tap tells you more than someone saying they like the colour.

## Keeping Both Themes in Sync After Launch

Dark themes rot. A new feature ships, somebody [hardcodes a hex value under deadline pressure](https://weareaffective.com/learning-centre/is-dirty-data-ruining-your-mobile-apps-purpose-what-app-developers-need-to-know), and six months later you've got a product where half the screens were designed and the other half were patched. The light theme stays healthy because everyone sees it every day.

The structural fix is to make the dark theme hard to skip. Every new component gets both values at the point it's created, and the design file shows both states next to each other rather than on a separate page nobody opens. If a token doesn't exist for a colour, that's the signal to add one instead of typing a hex.

Add a dark theme line to your review checklist, covering the new screens, the empty states, the error states and anything that came from a third party. Empty states and error states are the ones that get missed, because they're built last and rarely demoed.

It's worth running a short sweep every quarter. Walk the whole product in dark mode on a real device, note what's drifted, and fix the drift as a batch. Half a day of that beats a rebuild, and the drift is always smaller than you expect when you catch it early.

## Conclusion

Dark mode is a design decision with feelings attached, which is why inverting a palette never quite works. The background sets the mood, the undertone carries the brand, the surface steps replace the shadows, and the accent colour says more in the dark than it ever did on white.

On the healthcare and health insurance product for African markets, the dark interface with green undertones was the point rather than an option, because people arriving worried needed something calm to land on. On the genetics app, the gap between luxurious packaging and a cold, clinical product broke the journey at the last step. Both are the same lesson from different directions, which is that the surface people touch has to feel like the promise they were made.

So build the dark theme properly. Rebuild the palette from the background up, check your contrast on every surface, fix the icons with black baked into them, and test it in a dark room at two in the morning rather than a bright office at eleven.

If you're planning a dark theme and want it to carry the brand rather than survive it, [let's talk about your app dark mode design](https://weareaffective.com/get-started).

## Frequently Asked Questions

Can I just invert my light theme to create a dark mode?

No, inversion breaks three things almost every time: elevation, because your shadow language stops being visible against a dark field; accent colour, because saturation appears to climb on near-black; and your greyscale steps, which collapse into each other. A dark theme is effectively a second product and deserves its own design process rather than a palette flip.

Why do light and dark interfaces handle hierarchy so differently?

On a light screen, darker elements read as closer and heavier, so shadows and dark text carry your hierarchy for you. In the dark, lighter reads as closer, so if you simply invert, your hierarchy runs backwards and the elements you wanted to recede become the brightest things on screen.

Why do people actually switch dark mode on?

Mostly for comfort. Reading in bed, checking something in a dim room, or getting through a long session where white screens start to sting. A 2026 mobile interface study reported by Browserstack found 68.4% of 215 participants preferred dark mode in mobile apps, citing visual comfort and reduced eye strain in low light.

When do users switch back to light mode?

They switch back when something fails them, when they cannot read a label, when a photo looks wrong, or when a form suddenly feels harder than it did the day before. Bright sunlight is another common trigger, because a dark screen outdoors simply gives you less to work with.

Does the dark mode setting tell me anything about the user?

Usually yes, it signals context. Someone in dark mode is often winding down, concentrating, or sitting in a quiet, dim room, which is a very different emotional state from a mid-morning commute. Your interface can acknowledge that with calmer motion, softer accents and less visual shouting.

Why does my brand colour look wrong on a dark background?

Surrounding darkness pushes a colour's apparent brightness up, so a saturated brand red that reads as confident on white can read as aggressive on near-black. You will normally need a separate, desaturated or adjusted version of your accent colour specifically for the dark theme.

How do I show elevation without shadows?

In a dark interface, shadows largely stop being visible, so you need another way to express depth. Surface lightness becomes the main tool, with closer elements rendered slightly lighter than the surfaces behind them, supported where needed by subtle borders or tonal separation.

When should dark mode be designed in a project?

Ideally not as a late add-on, which is when most dark themes get built by inverting the light palette and patching whatever screams. Treat it as a deliberate pass across palette, depth, contrast, brand colour, states, imagery, accessibility and platform implementation, then keep both themes honest with ongoing checks after launch.

## Related Articles

[![We Are Affective](https://weareaffective.com/hubfs/we_are_affective_logo_mark.svg)](https://weareaffective.com)

20-22 Wenlock Road  
London, N1 7GU  
United Kingdom

+44 20 4572 8062  
[hello@weareaffective.com](mailto:hello@weareaffective.com)

<https://linkedin.com/company/weareaffective> <https://instagram.com/weareaffective> <https://facebook.com/weareaffective>

Services

[App planning & strategy](https://weareaffective.com/app-planning-strategy) [App design](https://weareaffective.com/app-design-agency) [App UX design](https://weareaffective.com/app-ux-design) [App UI design](https://weareaffective.com/app-ui-design) [App technical architecture](https://weareaffective.com/app-architecture) [Existing app audits](https://weareaffective.com/app-audit)

Legal

[Privacy policy](https://app.termly.io/policy-viewer/policy.html?policyUUID=b8fa9921-7518-4fb5-8ddd-9dc7f5977ed2) [Terms](https://app.termly.io/policy-viewer/policy.html?policyUUID=8b6a6ad5-91bd-4176-a5f7-6d36b0398f70)

Case studies

[TravAI](https://weareaffective.com/case-studies/travai) [Meditech](https://weareaffective.com/case-studies/harley) [WorkingWeight](https://weareaffective.com/case-studies/workingweight) [SkinSync](https://weareaffective.com/case-studies/skinsync) [Three Lochs](https://weareaffective.com/case-studies/three-lochs) [Drift](https://weareaffective.com/case-studies/drift)

About us

[Our Story](https://weareaffective.com/about) [How We Work](https://weareaffective.com/how-we-work)

Guides

[Creating an app](https://weareaffective.com/how-to-create-an-app) [Building an MVP](https://weareaffective.com/building-an-mvp) [Cost and budgeting](https://weareaffective.com/app-development-cost) [App technology](https://weareaffective.com/app-development) [Planning and strategy](https://weareaffective.com/app-planning-strategy) [User research](https://weareaffective.com/app-user-research) [Onboarding design](https://weareaffective.com/app-onboarding-design) [User psychology](https://weareaffective.com/user-psychology-app-design) [Launch and growth](https://weareaffective.com/app-launch-growth)

 Copyright © 2026, weareaffective.com. All rights reserved.