--- title: What Are the Best Practices for Dark Mode Colour Schemes? description: Learn best practices for dark mode colour schemes, from background colours and surface layers to text contrast, brand accents and accessibility. image: https://weareaffective.com/hubfs/learning-centre-images/what-are-the-best-practices-for-dark-mode-colour-schemes.webp --- [Skip to content](https://weareaffective.com/learning-centre/what-are-the-best-practices-for-dark-mode-colour-schemes#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 # What Are the Best Practices for Dark Mode Colour Schemes? Table of Contents Turn on dark mode in an app and the brand colour is often the first thing to break. A bright coral button that looked warm and friendly on white starts to buzz against near-black, and the eye can't settle on it. That buzz is the clearest sign that dark mode colour schemes have been produced by flipping a switch rather than being designed, and people feel it long before they can explain it. > Dark mode is a second palette, and it deserves the same care as the first one. Dark mode is now something people expect rather than something they discover. It sits in the settings of phones, laptops and watches, it follows the time of day, and it's the state a lot of people live in all year round. A [product that only works properly](https://weareaffective.com/app-ui-design) in one of its two skins is a product that's half finished. We've built dark interfaces for products where the stakes are high, including a healthcare and health insurance product for African markets where we used a dark UI with green undertones to calm people down rather than wind them up. This article covers how we think about it, from the background colour up through surfaces, text, brand accents, semantic states and the feelings all of that quietly creates. ## Why Inverting Your Light Palette Fails Inversion sounds like a tidy solution. Take the light palette, flip every value, ship it. The reason it falls apart is that the eye doesn't treat light and dark the same way. Bright text on a dark field spreads at the edges, a glow called halation, so pure white on pure black looks fuzzy and slightly vibrating. Flip the values and you get maximum contrast exactly where you want the eye to relax. #### Why dark mode colour schemes need rebuilding Depth breaks too. In light mode, a card floats because of a soft grey shadow underneath it. On a dark background that shadow has nothing to do, because a dark smudge on a dark surface says nothing at all. | Element | Light mode | Straight inversion | What works | | --- | --- | --- | --- | | Background | Pure white | Pure black | Dark grey with a hue | | Body text | Near-black | Pure white | Soft off-white | | Depth | Drop shadow | Invisible shadow | Lighter surface | | Brand accent | Saturated | Same colour, glowing | Lighter, calmer version | | Dividers | Light grey line | Dark grey line | Low-opacity white | Each row there is a decision somebody has to make. An automatic inversion makes all of them badly in one pass, and the result feels harsh in a way users read as cheap. ## Choosing Your Dark Mode Background Colour Everything else hangs off this one choice, so it's worth slowing down on. A pure black dark mode background colour gives you the deepest contrast and the cleanest OLED blacks, and on those screens true black pixels are switched off entirely, which [PCloudy](https://www.pcloudy.com/blogs/test-dark-mode-across-devices/) puts at a 30 to 60 per cent battery saving. That only applies to OLED and AMOLED panels, and it costs you something in comfort. A very dark grey sits better for reading. It softens the gap between background and text, it leaves you room to build lighter surfaces on top, and it stops the halation problem before it starts. Somewhere around a near-black grey is the common landing spot, and it's where we start unless there's a reason to go darker. Give your darkest background a hue rather than leaving it neutral. A few per cent of your brand colour mixed into the grey makes the whole interface feel like it belongs to you. On the healthcare product we built for African markets, we pushed green undertones through the dark UI. Green reads as calm, safe and medical, and we wanted that feeling in the surface itself before a single word loaded. We kept it warm enough to avoid the cold, clinical look that hospital software falls into, because people arriving at a health insurance claim are already tense. ## 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 Surface Layers and Elevation In dark mode, light does the job shadow does in light mode. The higher a surface sits, the lighter it gets, because you're imagining a light source above the interface catching the raised edges. Four or five steps is usually enough, and each one is a small lift rather than a jump. 1. Base background, the darkest value in the system 2. Cards and panels resting on that base 3. Sheets, menus and anything that slides over content 4. Dialogs and modals that take over the screen 5. Tooltips and toasts, the brightest and most temporary The steps need to be far enough apart to read as different and close enough together that the screen stays calm. If the top layer glows white, you've gone too far and the structure starts to shout. > In dark mode, lighter means closer, so elevation is a colour decision rather than a shadow one. A clean way to build this is one white overlay at rising opacity over your base colour, so every layer shares the same undertone and nothing drifts off-hue. Shadows still help a little at the highest levels, mostly to separate a modal from the dimmed content behind it, and they work best when they're deeper and softer than their light mode equivalents. ## Text Colours, Weight and Readability Pure white body text on a dark surface is too much. It glows, it smears at the edges of letterforms, and people read more slowly without knowing why. A soft off-white, a few steps down from maximum, carries the same clarity without the strain. Hierarchy comes from steps of opacity rather than different greys. Primary text sits at the top, secondary text for supporting copy sits lower, and disabled or placeholder text sits lower again. Three tiers is plenty, and using white at reduced opacity keeps every level sharing the background's undertone, so the text never looks slightly the wrong colour. Check your lightest font weights in dark mode before you ship. Hairline and thin weights thicken and blur against dark backgrounds, and a regular weight often reads cleaner than the light one you chose on white. Type size and letter spacing deserve a second look too. Long paragraphs are harder going in dark mode, so a touch more line height pays for itself on anything over a few sentences. On the health insurance product we simplified the language itself as much as the type, pulling out medical jargon so that people could read a claim screen once and understand it. Shorter sentences lower the reading effort, which matters more when the light levels are low and the subject is stressful. ## Adapting Brand and Accent Colours Brand colours are chosen on white, in a brand book, usually at full saturation. Put that same value on a near-black surface and it either glows like a neon sign or disappears into the murk. Deep navy vanishes. Saturated orange burns. The fix is a tone ramp for every brand hue, ten or so steps from very light to very dark, built once and used by both modes. Light mode pulls its accent from the middle of the ramp. Dark mode pulls from a lighter step, usually with some saturation taken out, so the colour stays recognisably yours while sitting calmly on the background. Recognition survives this better than people fear. The hue is what carries brand memory, and shifting lightness keeps the hue intact. A fashion retailer's signature red still reads as that red at a lighter, softer step, and it stops fighting the dark surface for attention. One accent colour should do the heavy lifting on any screen. Dark backgrounds make every bright thing feel like a priority, so a dark mode colour palette with three competing accents turns into noise fast. Pick the action you want people to take, give it the brightest treatment, and let everything else sit back. ## Contrast Ratios and Accessibility Standards The standards don't relax because the background got darker. WCAG 2.1 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text at 18pt and above, and as [Browserstack](https://www.browserstack.com/guide/how-to-test-apps-in-dark-mode) notes, there's no separate, looser set of numbers for dark themes. Every pairing in your dark palette needs checking on its own. Two places slip through. The first is text sitting on elevated surfaces, because a value that passes on the base background can fail on a lighter card. The second is non-text elements like icons, input borders, focus rings and chart lines, which still need 3 to 1 against whatever sits behind them. Too much contrast is its own accessibility problem. People with astigmatism find bright text on pure black genuinely hard to read, because the halation blurs the letterforms. Easing the background up to a dark grey and easing the text down to an off-white helps that group without dropping below the thresholds. Build the checks into the design file rather than leaving them for a late audit. If every token pairing is tested as the palette is made, accessibility stops being a round of corrections and becomes the shape of the system. ## Colour Psychology in Low-Light Interfaces Different colours psychologically evoke different emotions, and a dark interface concentrates that effect. Green reads as calm. Blue reads as clinical and controlled. Red reads as passionate and driven, which is handy for urgency and dangerous everywhere else. These associations do their work quietly, without people noticing what's happening to them. You can see the pattern in which sectors reach for which palette. Gaming products live in blacks and blues. Medical apps go greens and whites for that clinical, calming feel. Finance leans blue because blue says steady. > Colour evokes the feeling first, and people only rationalise it afterwards. Darkness adds its own layer on top. A dark screen reads as private, focused, night-time, sometimes premium. That suits a jewellery brand's product pages and a meditation app's evening session, and it suits a bright wellness brand far less well if the whole personality is sunlight and optimism. Think about what the dark field is saying before you decide what the accents say. Saturation carries emotion as much as hue does. The same green at full strength feels energetic and at a softer strength feels reassuring, so the step you choose off the ramp is an emotional decision rather than a technical one. ## Designing for Users in a Heightened Emotional State People don't arrive at every product in the same condition. Someone browsing a hotel for next summer is relaxed and curious. Someone filing a health insurance claim is worried, possibly frightened, and reading with half their attention. The layering of the interface should follow that emotional state rather than whatever makes sense from a product point of view. On the healthcare and health insurance product we built for African markets, that shaped nearly every decision. We chose a dark UI because it lowers the visual noise, then put green undertones through it for calm, safety and medical support, while deliberately steering away from the cold clinical look that makes people feel processed. The language was simplified and stripped of jargon so that we destressed people rather than adding to their anxiety. With high stress and high anxiety, the job is to reduce the level people came in with. That means fewer things on screen at once, plain words, one clear next step, and information revealed in layers as somebody is ready for it. The same logic runs the other way for excitement. A [fitness app on a Saturday morning](https://weareaffective.com/learning-centre/fitness-app-trends-2026-what-users-really-want-from-their-workout-apps) can carry more energy, brighter accents and more happening at once, because the emotional state it's meeting has room for it. ## Semantic Colours: Errors, Warnings and Success States Error red is the colour most likely to go wrong in dark mode. The standard deep red that works on white turns muddy and unreadable on a near-black background, and a brighter red aimed at fixing that ends up shouting at [somebody who's already made a mistake](https://weareaffective.com/learning-centre/why-a-genetics-products-error-states-were-rewritten-before-they-could-appear). A lighter, slightly desaturated red holds the meaning and drops the aggression. Success green, warning amber and informational blue all need the same treatment, and all four should keep their hue relationship so nothing gets confused for anything else. Amber on dark is the trickiest, because it drifts towards yellow and loses urgency as it lightens. Colour on its own was never enough anyway. Around 8 per cent of men have some form of colour vision deficiency, according to [Lollypop Design Studio](https://lollypop.design/blog/2026/june/trading-app-design/), and dark backgrounds narrow the range of distinguishable hues further. Every state needs an icon, a label or a position that carries the same message. Error containers want care too. A tinted panel behind an error message has to stay dark enough that the text on top still clears its contrast threshold, which usually means a very subtle red-tinted surface rather than a filled block. ## Icons, Imagery and Illustration on Dark Backgrounds Icons that were drawn for light mode often come with a weight problem. Thin strokes bloom and thicken, and solid dark glyphs disappear. Switching the fill to your off-white text colour fixes most of it, and reviewing stroke weight at small sizes fixes the rest. Imagery is the part that gives dark mode away. Product photography shot on a white background turns into a glowing white rectangle in the middle of a dark screen, which is why beauty and skincare brands with cut-out packshots adapt more easily than ones relying on full-bleed studio shots. Cut-outs with transparency sit naturally on any surface, so they're worth the extra production cost. Give large photographs a slight dark overlay in dark mode, around 8 to 12 per cent. It stops bright images from glaring at night without making them look dirty. Illustration needs a proper second version rather than a filter. The same character, the same lines, redrawn with colours that work against a dark field. Headspace's onboarding works because the illustration isn't asking you to be calm, it's just being calm at you, and you mirror that state. A washed-out dark version of that artwork breaks the spell completely. ## Managing Two Palettes as One Design System The thing that keeps two modes honest is naming colours for what they do rather than what they look like. A token called grey-900 means nothing in a theme where the backgrounds are dark. A token called surface-base, surface-raised or text-primary holds its meaning in both, and swapping themes becomes swapping values behind the same names. Most teams end up with three layers. Raw values sit at the bottom, every step of every hue ramp. Semantic tokens sit above them, naming roles. Components reference the semantic tokens and never the raw values. > Name a colour for the job it does, and both themes can share one system. That structure also stops the slow drift that creeps in when two palettes are maintained by different people. New components inherit correct colours in both modes automatically, so nobody discovers an unreadable screen three releases later. Dark mode works best when it's part of the original design brief rather than a later project. A dark mode colour palette added at the end always shows, because it ends up bolted on, with screens that don't quite feel like they belong to the same product. ## Testing Across Devices and Lighting Conditions Dark palettes behave differently on different screens. OLED renders true black as nothing at all, LCD renders it as a dark grey glow, and the gap between your surface layers can vanish on a cheap panel that looked fine on a studio monitor. Test on both, and test on the devices your audience actually owns. Light conditions change the answer as much as hardware does. A dark interface in direct sunlight loses most of its contrast, and the same screen at 11pm in a dark bedroom can feel blinding. Preference for dark mode on mobile ran at 68.4 per cent in a 2026 study reported by [Browserstack](https://www.browserstack.com/guide/how-to-test-apps-in-dark-mode), with comfort in low light among the reasons given, and that comfort only holds if the palette has been tuned for the conditions people use it in. Review your dark screens at night with the lights off and the phone brightness low. Half the problems are invisible at desk brightness in a bright office. There's a simpler test worth running first. Play the dark version back to the client and ask how it feels to them, because clients are users too, and the response is immediate. That reaction catches the emotional misses long before a formal study does. ## Common Dark Mode Colour Mistakes The same handful of problems turn up again across products that otherwise got a lot right. - Pure white text on pure black, which glows and tires the eyes - Brand colours pasted across at full saturation so they vibrate - Shadows kept as the only depth cue, leaving everything flat - Only two surface values, so cards and sheets look identical - Error red left dark enough to be unreadable - Photography and illustration shipped unchanged from light mode Underneath all of them is one habit, which is treating [dark mode as a technical setting](https://weareaffective.com/learning-centre/what-are-the-most-common-mistakes-startups-make-when-building-their-first-app) handled by code rather than a design problem handled by designers. The visual layer gets flipped and nobody asks what the new palette makes people feel. Borrowed palettes are the other trap. Taking a colour scheme from a product that does something similar in a different scenario and dropping it into yours doesn't make it work, because the context and the emotional fit were doing half the job in the original. A dark palette built for a gaming product carries energy and intensity that a sleep app can't use. Partial coverage is the quiet one. One unconverted screen, usually a settings page or a legal document, flashing white at somebody at midnight undoes the care taken everywhere else. ## Conclusion Good dark mode colour schemes come from building a second palette on purpose rather than deriving one by arithmetic. That means picking a background with a hue in it, stacking surfaces that get lighter as they rise, softening text away from pure white, and reworking brand and semantic colours so they sit calmly against the dark. The craft decisions and the emotional ones are the same decisions. Green carries calm and safety, blue carries clinical control, red carries urgency, and darkness carries privacy and focus on top of all of it. Choosing where on a tone ramp an accent sits is choosing how strongly somebody feels something, whether or not they ever notice. On the healthcare and health insurance product we built for African markets, the dark UI with green undertones and the stripped-back, jargon-free language were one decision made twice, because both existed to lower the anxiety people arrived with. That's the standard worth holding yourself to in either mode. If you're planning a dark theme, or you've shipped one that doesn't feel quite right yet, we're happy to look at it with you. [Let's talk about your dark mode colour palette](https://weareaffective.com/get-started). ## Frequently Asked Questions Why can't I just invert my light mode palette to create dark mode? The eye doesn't process light and dark the same way, so flipping values creates problems rather than solving them. Pure white text on pure black causes halation, a glow at the letter edges that makes text look fuzzy, and drop shadows become invisible on dark backgrounds. Every element needs a deliberate decision, which an automatic inversion makes badly in a single pass. Should my dark mode background be pure black or dark grey? A very dark grey is usually the better starting point because it softens the gap between background and text, prevents halation and leaves room to layer lighter surfaces on top. Pure black gives you the deepest contrast and real battery savings on OLED and AMOLED screens, reportedly 30 to 60 per cent, but it costs you reading comfort. Start with near-black grey unless you have a specific reason to go darker. How do I add brand personality to a dark background? Mix a few per cent of your brand colour into the dark grey rather than leaving it a neutral tone. That small amount of hue makes the whole interface feel like it belongs to your product instead of looking like a generic dark theme. What should I use for body text in dark mode? Use a soft off-white rather than pure white. Pure white on a dark field spreads at the edges and appears to vibrate, which tires the eye quickly, whereas a slightly muted off-white keeps text legible without the harshness. How do I show depth without drop shadows? In dark mode, a dark smudge beneath a dark card communicates nothing, so shadows stop doing their job. Instead, build depth by making elevated surfaces progressively lighter than the background. The higher an element sits in the stack, the lighter its surface should be. Why does my brand colour look wrong on a dark background? Saturated brand colours that feel warm and friendly on white tend to buzz against near-black, and the eye struggles to settle on them. The fix is to create a lighter, less saturated version of the brand colour specifically for dark mode rather than reusing the original value. What should I use for dividers and separators? Low-opacity white works better than a dark grey line. A darker line on a dark surface disappears, whereas a subtle white overlay reads as a separator without drawing more attention than it deserves. Is dark mode still an optional extra? No, people now expect it rather than discover it. Dark mode sits in the settings of phones, laptops and watches, it can follow the time of day, and many users stay in it permanently. A product that only works properly in one of its two skins is effectively half finished. ## Related Articles [![What Button Design Principles Improve App Usability?](https://weareaffective.com/hubfs/learning-centre-images/what-button-design-principles-improve-app-usability.webp)](https://weareaffective.com/learning-centre/what-button-design-principles-improve-app-usability) ### [What Button Design Principles Improve App Usability?](https://weareaffective.com/learning-centre/what-button-design-principles-improve-app-usability) Open any app on your phone and count the taps between you and the thing you came to do. Every one... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![How Much Does It Cost to Add Accessibility Features to a Mobile App?](https://weareaffective.com/hubfs/learning-centre-images/how-much-does-it-cost-to-add-accessibility-features-to-a-mobile-app.webp)](https://weareaffective.com/learning-centre/how-much-does-it-cost-to-add-accessibility-features-to-a-mobile-app) ### [How Much Does It Cost to Add Accessibility Features to a Mobile App?](https://weareaffective.com/learning-centre/how-much-does-it-cost-to-add-accessibility-features-to-a-mobile-app) Accessibility is one of those topics where the conversation tends to start late. A product gets... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![Dark Mode Done Right a Step by Step Guide for App Developers](https://weareaffective.com/hubfs/learning-centre-images/dark-mode-done-right-a-step-by-step-guide-for-app-developers.webp)](https://weareaffective.com/learning-centre/dark-mode-done-right-a-step-by-step-guide-for-app-developers) ### [Dark Mode Done Right a Step by Step Guide for App Developers](https://weareaffective.com/learning-centre/dark-mode-done-right-a-step-by-step-guide-for-app-developers) We worked on a healthcare and health insurance product built for African markets, and we chose a... by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee) [![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) 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.