Most people think dark mode is just about flipping colours from light to dark, but that's where they get it completely wrong. Good dark mode design is actually harder than light mode—and I've learned this the hard way through countless mobile app projects where clients assumed it would be a simple switch. The truth is, dark mode colour schemes require a completely different approach to how we think about contrast, readability, and user comfort.
Getting dark mode right isn't just about aesthetics; it's about creating a mobile app experience that genuinely helps users. When done properly, dark mode can reduce eye strain in low-light conditions, save battery life on OLED screens, and give your app a modern, professional feel. But when done poorly? You'll end up with text that's impossible to read, colours that clash horribly, and users who'll switch back to light mode faster than you can say "accessibility nightmare".
The biggest mistake developers make is thinking dark mode is just inverting their existing colour palette
Throughout this guide, we'll explore the UI best practices that actually work for dark mode implementations. From choosing the right base colours to ensuring your text remains readable across different devices, each chapter builds on the last to give you a complete understanding of what makes dark mode colour schemes successful. Whether you're designing your first mobile app or refining an existing one, these techniques will help you create dark mode interfaces that users genuinely want to use.
Understanding Dark Mode Basics
Dark mode has become one of those features that users now expect from their apps—and for good reason. I've watched this trend evolve from a nice-to-have feature to something that can genuinely impact user satisfaction and app store ratings. At its core, dark mode simply inverts the traditional light interface by using dark backgrounds with light text and elements.
The benefits are pretty straightforward. Dark mode can reduce eye strain, particularly in low-light environments when people are scrolling through their phones before bed or in dimly lit rooms. It also helps conserve battery life on devices with OLED screens since black pixels don't require power. Plus, let's be honest—many users just prefer how it looks.
More Than Just Inverting Colours
Here's where many designers get it wrong though. Dark mode isn't just about flipping your existing colours to their opposites. True black backgrounds can actually create harsh contrast that's uncomfortable to look at; instead, you want to use dark greys that provide depth whilst maintaining readability. The key is creating a colour hierarchy that works in low-light conditions without sacrificing the visual structure of your app.
Getting dark mode right means thinking about how colours behave differently when the context changes—something we'll explore in much more detail throughout this guide.
Choosing the Right Base Colours
When I first started working with dark mode colour schemes, I made the mistake of thinking "dark mode" meant just inverting everything to black. Wrong! True black (#000000) is actually one of the worst choices you can make for your mobile app's dark mode design. It creates harsh contrast that strains users' eyes and makes text harder to read than it needs to be.
The sweet spot for dark mode base colours lies in what we call "dark greys"—colours that are dark enough to feel like proper dark mode but light enough to be comfortable. Most successful mobile apps use colours between #121212 and #1F1F1F for their primary backgrounds. These colours give you that dark aesthetic whilst maintaining readability and reducing eye strain.
Best Base Colour Options
- #121212 (Google's Material Design recommendation)
- #1C1C1E (Apple's iOS system background)
- #1F1F1F (Popular choice for content apps)
- #0D1117 (GitHub's dark theme background)
- #1A1A1A (Spotify's dark mode colour)
You'll also want to consider your brand colours when choosing base colours. If your brand uses blue, you might add a subtle blue tint to your dark grey base. Just keep it subtle—we're talking about adding maybe 2-3% colour saturation, nothing more.
Test your chosen base colours on different devices and screen brightness levels. What looks perfect on your laptop might be too dark on a phone in bright sunlight.
Text and Typography in Dark Mode
Getting text right in dark mode is probably one of the trickiest parts of the whole design process—and I've seen plenty of apps get it spectacularly wrong over the years! The main challenge is that white text on a dark background behaves completely differently to black text on white. Your eyes process it differently, and what looks crisp and readable in light mode can become harsh and uncomfortable in dark mode.
The biggest mistake I see developers make is using pure white (#FFFFFF) for text on dark backgrounds. This creates too much contrast and makes text feel like it's glowing or vibrating on the screen. Instead, you want to use slightly muted whites—something around #E0E0E0 or #F0F0F0 works much better for body text.
Typography Hierarchy in Dark Mode
Creating a clear text hierarchy becomes even more important in dark mode because users' eyes work harder to process information. You need different opacity levels for different types of text:
- Primary text (headings, main content): 87% opacity
- Secondary text (subheadings, captions): 60% opacity
- Disabled or hint text: 38% opacity
Font weight also needs adjusting—what looked perfect in light mode might appear too thin in dark mode. Consider bumping up your font weights slightly; regular text might need to become medium weight, and light text should probably become regular. This isn't about making everything bold, it's about maintaining readability when light text sits on dark backgrounds.
Creating Contrast Without Strain
Getting contrast right in dark mode colour schemes is where many mobile app designers trip up. You need enough contrast so people can actually read your text and use your interface, but not so much that it feels like staring into a torch at midnight. The goal is making your app comfortable to use for extended periods.
Pure white text on pure black backgrounds might seem logical, but it creates something called halation—where the white text appears to glow and blur slightly. This makes reading harder, not easier. Instead, use slightly off-white colours like #E8E8E8 or #F0F0F0 for your primary text on dark backgrounds.
The 4.5:1 Rule
Web accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. There are free tools that calculate this for you—just input your background and text colours. But remember, meeting the minimum isn't always enough for a great user experience.
The best dark mode designs feel effortless to read, like the text is floating naturally on the surface rather than fighting against it
Layered Contrast Approach
Think of your UI in layers. Your darkest colour should be the background, with each interactive element sitting on progressively lighter shades. Cards might be #1F1F1F, buttons #2A2A2A, and active states #3A3A3A. This creates natural hierarchy without relying on harsh contrasts that strain the eyes during those late-night app sessions.
Icons and Visual Elements
Icons in dark mode aren't just regular icons with a quick colour swap—they need proper thought and consideration. I've seen too many apps where designers simply invert their light mode icons and call it a day. The result? Icons that look washed out or completely disappear against dark backgrounds.
The golden rule for dark mode icons is to make them lighter, not darker. White or light grey icons work brilliantly on dark backgrounds, but you'll want to avoid pure white (#FFFFFF) as it can be too harsh. Instead, go for something like #E0E0E0 or #F5F5F5—these give you that crisp look without the eye strain.
Visual Elements That Work
Buttons, cards, and other visual elements need special attention too. Your button backgrounds should be lighter than your main background but not so light they blind users. Think subtle elevation rather than dramatic contrast. Cards work best with a slightly lighter background than your main interface—this creates depth without being overwhelming.
One trick I've learned over the years is to use subtle borders or shadows to define elements rather than relying purely on colour differences. A 1px border in a muted colour can work wonders for separating content areas whilst maintaining that sleek dark mode aesthetic users expect.
Testing Your Dark Mode Design
I've learnt the hard way that testing dark mode colour schemes isn't something you can rush through at the end of a project. You need to test your mobile app design across different devices, lighting conditions, and times of day—because what looks perfect on your MacBook screen at 2pm might be completely unreadable on a Samsung Galaxy at midnight.
Start by testing your app in various lighting environments. Take your phone outside on a sunny day, then try using it in a dimly lit room. The contrast that seemed perfect in your office might fall apart under different conditions. I always recommend testing with real users too; they'll spot common user testing mistakes that you've become blind to after staring at the same screens for weeks.
Device Testing Across Different Screens
Different phone manufacturers handle dark mode differently. Apple's OLED screens will show true blacks, whilst older LCD screens might display them as dark grey. Test your colour schemes on both types of displays to make sure your design works everywhere.
Accessibility Testing
Use accessibility tools to check colour contrast ratios—aim for at least 4.5:1 for normal text and 3:1 for large text. Don't forget to test with people who have visual impairments; they'll give you feedback that no automated tool can provide.
Test your dark mode design at different times of day and in various lighting conditions. What works in bright office lighting might be completely unusable in bed with the lights off.
Common Mistakes to Avoid
After years of designing dark mode interfaces, I've noticed the same mistakes crop up time and time again. The biggest one? Using pure black (#000000) as your background colour. I know it seems logical—dark mode means dark colours, right? But pure black creates harsh contrast that's actually harder on the eyes than a softer dark grey. Your users will thank you for choosing something like #121212 instead.
Another classic error is simply inverting your light mode colours. This might work for basic elements, but it often produces muddy results that look unprofessional. Dark mode isn't just light mode flipped upside down—it needs its own carefully considered colour palette.
Text and Contrast Problems
Many designers make text too bright in dark mode, thinking white text on dark backgrounds needs to be #FFFFFF. This creates eye strain and makes reading uncomfortable. Use slightly dimmed whites or light greys instead.
Here are the most common mistakes I see:
- Using pure black backgrounds instead of dark greys
- Making text too bright or too dim
- Forgetting to test on actual devices
- Not considering how colours look in different lighting conditions
- Ignoring accessibility features every mobile app should have for contrast ratios
Remember, dark mode should feel comfortable and easy to use, not dramatic or hard to read. Take time to test your design properly—your users will notice the difference.
Conclusion
Getting dark mode colour schemes right isn't just about flipping your whites to blacks and calling it a day—there's proper science behind what makes users comfortable and what makes them want to delete your mobile app faster than you can say "accessibility". After working with countless brands on their UI best practices, I've seen the difference between apps that nail their dark mode implementation and those that leave users squinting at their screens.
The beauty of dark mode lies in its ability to reduce eye strain whilst maintaining all the functionality users expect from your app. When you choose the right base colours, create proper contrast ratios, and test your design thoroughly, you're not just following trends—you're creating something that genuinely improves the user experience. Your typography needs to be readable, your icons need to pop without being harsh, and your overall colour schemes need to work together harmoniously.
What I love most about dark mode design is how it forces you to think differently about your mobile app's visual hierarchy. You can't rely on the same tricks that work in light mode; you need to understand how colours behave in darker environments and how users actually interact with your interface when they're using their phones in low-light conditions.
The best dark mode implementations feel natural and effortless—users shouldn't even notice the transition between light and dark modes because both versions of your app work beautifully.
