In recent years, dark mode has become a dominant trend in UI/UX design. From operating systems like iOS and Android to apps like Twitter, YouTube, and Slack—everyone’s embracing the darker side. But while dark mode offers sleek aesthetics, reduced eye strain in low-light environments, and potential battery savings, designing a functional dark theme isn’t just about inverting colors.
If you’re a designer looking to implement or improve your dark theme, here’s a comprehensive guide on the dos and don’ts of dark mode design to help you create visually pleasing and user-friendly experiences.
Why dark mode matters
Before we dive into the best practices, let’s understand why dark mode is so popular:
Visual Comfort: Reduces glare and is easier on the eyes in dim environments.
Battery Efficiency: OLED and AMOLED screens consume less power in dark mode.
Modern Aesthetics: Many users simply prefer the sleek, sophisticated look.
Accessibility: For some users with light sensitivity or visual impairments, dark mode can significantly improve usability.
However, poor execution can negate these benefits and even cause usability issues. Let’s explore what to do—and what to avoid.
Do: Use true dark or dark gray wisely
A true black background (#000000) can save battery on OLED screens, but it can also create harsh contrast with white text. To avoid this, many designers opt for dark gray backgrounds instead (#121212, #1E1E1E, etc.), which provide a more balanced look.
Best practice:
Use a palette that includes multiple shades of dark gray to create depth and visual hierarchy. Reserve true black for elements where you want maximum contrast or drama.
Don’t: Just invert your light theme
One of the biggest mistakes designers make is simply inverting the light theme colors. Dark mode isn’t a mirror—it’s a reinterpretation.
Inverting colors often results in clashing tones, poor legibility, and unpleasant user experiences.
Example:
A light blue on white might look clean, but a bright blue on black could be jarring and difficult to read.
Pro tip:
Design dark mode as its own theme. Adjust contrast, hues, and brightness for harmony and readability.
Do: Adjust color saturation and brightness
Colors appear more vibrant on dark backgrounds, so desaturate or tone down bright colors to prevent visual overload.
Instead of neon or saturated hues, opt for muted tones or apply opacity layers to soften them.
Suggested Strategy:
Primary color: Use 80–90% opacity.
Secondary elements: Reduce to 60–70%.
Disabled states: Drop down to 40% or less.
Don’t: Use pure white Text
White text (#FFFFFF) on black creates high contrast that can lead to eye strain over time. Instead, use off-white or light gray (#E0E0E0, #CCCCCC) for body text.
Readability tip:
Use hierarchical contrast in your text styles:
Headings: Higher contrast, e.g., #FAFAFA
Body text: Medium contrast, e.g., #CCCCCC
Captions or secondary info: Lower contrast, e.g., #999999
Do: Focus on readability and contrast ratios
Make sure there’s enough contrast between text and background without going overboard. The WCAG (Web Content Accessibility Guidelines) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Tools you can use:
Contrast Checker by WebAIM
Accessible Colors
Don’t: Overuse shadows or blur effects
While subtle shadows can create a sense of elevation, too much can make your design feel muddy and heavy. Blur effects also tend to lose clarity on dark backgrounds.
Design tip:
Use simple layering and color variation instead of drop shadows to define elevation or separation.
Do: Create a dedicated color system for dark mode
Build a separate color system that complements your brand while staying functional in dark environments.
For example:
Background: #121212
Surface: #1E1E1E
Text: #E0E0E0
Accent: #82B1FF
Error: #FF6B6B
Helpful Tools:
Material Design Dark Theme Guidelines
Tailwind CSS Dark Mode
Don’t: Ignore interactive states
Interactive elements like buttons, links, and inputs must be clearly visible in all states: normal, hover, active, focused, and disabled.
Common mistake:
Designers forget to adjust the hover state contrast for dark backgrounds, making buttons appear unresponsive.
Solution:
Use clear visual cues like:
Brightened border or shadow on hover
Color shifts with accessible contrast
Focus rings for keyboard navigation
Do: Test in real environments
Dark mode may look perfect on your design tool, but real-life use can expose issues. Test your design:
In low light and bright light
On different screen types (OLED, LCD)
With accessibility tools like screen readers
Iteration tip:
Get feedback from users early, especially if your product is content-heavy or used at night (e.g., reading apps, dashboards).
Don’t: Forget branding consistency
Dark mode doesn’t mean abandoning your brand. Instead, adapt your brand palette to work on dark backgrounds.
Strategy:
1. Choose darker brand-compatible tones
2. Adjust logo colors or add white outlines
3. Maintain consistency in tone, imagery, and typography
Do: Offer easy toggle options
Users love choice. Offering an intuitive toggle between light and dark mode empowers users and increases engagement.
UX best practices:
Place the toggle in a visible location (e.g., settings or header)
Remember user preferences (use cookies or system settings)
Support system-level dark mode detection (e.g., prefers-color-scheme in CSS)
Bonus tips for dark mode design
Here are a few more things to consider:
1. Gradients and Illustrations
Use darker gradients or illustrations that are optimized for dark backgrounds. Avoid bright white highlights.
2. Typography
Increase line spacing and font size slightly for better readability in low light.
3. Cards and Containers
Use elevation, border contrast, or subtle shadows to distinguish surfaces and components.
Final thoughts: Design dark mode with purpose
Designing dark mode isn’t just about aesthetics—it’s about usability, comfort, and accessibility. By following these dark mode dos and don’ts, you can create a UI that not only looks great but functions well in all lighting conditions.
When done right, dark themes can enhance your product’s user experience, reduce eye fatigue, and give your app a modern edge.
So, whether you’re building a mobile app, website, or desktop software, keep these tips in mind and test with real users. A thoughtfully designed dark mode can make all the difference.
