Dark mode is now what users expect by default. Over 82% of smartphone users have enabled it on at least one app, and every major operating system supports system-level dark themes.
Despite this widespread adoption, dark mode remains one of the most poorly executed areas of UI design. Many products still get it wrong, right from low contrast and accessibility gaps to inconsistent visuals and weakened brand identity.
Great dark mode UI design requires a dedicated design system, deliberate color architecture, rigorous accessibility compliance, and a clear strategy for brand continuity.
In this guide, we break down 10 essential best practices to help you design dark mode interfaces that are usable and accessible. Backed by our experience at Onething Design across SaaS, consumer apps, and e-commerce platforms, this is a practical playbook to help you get it right.
What is Dark Mode UI Design?
Dark mode UI design is an interface style that uses dark backgrounds (deep grey or black) with light text and UI elements. It reduces screen brightness while maintaining readability and visual hierarchy.
Treating dark mode as merely a visual preference would be wrong. That’s because it is a design system approach that affects accessibility, colour strategy, typography, and component behaviour. When implemented as a superficial visual layer, it often leads to poor contrast, inconsistent interfaces, and usability issues.
How is Dark Mode Different From Light Mode?
Dark mode and light mode differ in how they handle luminance, contrast, and visual emphasis. Light mode uses bright backgrounds with dark content, making it ideal for readability in well-lit environments and long-form text. Dark mode reverses this by using dark surfaces with light content, reducing glare and perceived eye strain in low-light settings.
| Aspect |
Dark Mode |
Light Mode |
| Background |
Dark (deep grey to black) |
Light (white or light grey) |
| Text & Elements |
Light (white or muted tones) |
Dark (black or dark grey) |
| Best Use Environment |
Low-light or night-time usage |
Bright or daylight environments |
| Eye Comfort |
Reduces glare; better in dim settings |
Easier for long reading in bright settings |
| Contrast Handling |
Requires careful tuning to avoid eye strain |
Naturally high contrast, easier to manage |
| Battery Usage |
More efficient on OLED/AMOLED screens |
Consumes more power on OLED screens |
| Visual Hierarchy |
Needs depth via shadows, elevation, and opacity |
Easier with natural contrast and shadows |
| Common Risks |
Low contrast, color distortion, and readability |
Glare, eye fatigue in low-light conditions |
Best Practices for Dark Mode UI Design
Adopting a thoughtful approach to contrast, accessibility, and system consistency is a must while designing dark mode UI. The following best practices outline what it takes to build dark mode interfaces that are not only visually refined but also aligned with real user needs.
1. Choose the Right Dark Mode Color Palette
Dark mode isn’t about inverting colours or using pure black. In fact, #000000 often creates harsh contrast, eye strain, and poor readability, especially for users with light sensitivity.
Instead, use dark greys (like #121212) as your base. This reduces visual fatigue and allows you to build a clear hierarchy through subtle elevation and contrast.
Design your palette with intent:
- Avoid pure white text and use softer tones like #E8E8E8.
- Slightly desaturate colours to prevent visual vibration.
- Use lighter tints of brand colours for better visibility.
- Build depth by gradually lightening surfaces.
Finally, rely on semantic colour tokens (e.g., color-background, color-text-primary) instead of fixed hex values. This ensures your UI scales cleanly across light and dark themes.
2. Maintain Contrast That Meets WCAG Standards
Contrast is critical for readability in dark mode. If it fails, your interface becomes hard to use, especially for users with visual impairments.
Follow WCAG 2.1 guidelines:
- 4.5:1 for normal text
- 3:1 for large text and UI elements
The biggest issue in dark mode isn’t primary text, but it’s the secondary elements. Placeholder text, disabled states, captions, and subtle UI components often fall below acceptable contrast levels, undermining usability.
Make sure to check:
- Secondary and muted text
- Form placeholders and labels
- Disabled buttons and states
- Icons and interactive elements
- Borders, dividers, and focus states
You can audit dark mode contrast using tools like Colour Contrast Analyzer (TPGi), WebAIM Contrast Checker, Figma plugins (Contrast, A11y – Colour Contrast Checker), Stark for Figma and Sketch, and Chrome DevTools Accessibility Panel.
3. Choose Typography That Stays Clear on Dark Backgrounds
Typography behaves differently in dark mode. Light text on dark surfaces can appear thicker and slightly blurred, which affects readability – especially over long periods.
Choose fonts that are easy to read on screens, such as clean sans-serif typefaces (like Inter or system fonts). Avoid fonts that are too thin, too decorative, or tightly spaced, as they can become hard to read in dark mode.
Make a few key adjustments:
- Avoid very bold headings as they can feel too heavy. Use slightly lighter weights.
- Be careful with thin text as it can become faint or unreadable.
- Increase line spacing slightly to improve readability.
- Add a bit of letter spacing for small text to keep it clear.
The goal is to ensure that the text is comfortable to read. If your typography feels heavier or harder to scan in dark mode, it needs adjustment.
4. Use Elevation and Surface Layering to Replace Shadows
Shadows don’t work well in dark mode. On dark backgrounds, they become almost invisible, making it hard to tell which elements are on top and which are not.
That’s the reason it’s recommended to create depth by using slightly lighter shades for elevated elements. For example, cards, modals, and menus should appear a bit lighter than the background, and elements above them should be lighter still. This helps users clearly understand hierarchy.
You can still use shadows, but only subtly. They should support the design, and not define it.
To keep things consistent, define a few surface levels (like background, card, modal, tooltip) and assign each a specific shade. This makes your UI easier to maintain across modes.
5. Avoid Inverting Icons and Images & Adapt Them Properly
Simply inverting icons or images for dark mode doesn’t work. It distorts colours, breaks brand identity, and creates a poor visual experience.
Instead, adapt assets based on their type:
- Monochrome icons: Use single-colour SVGs that follow text colour. They automatically adjust in dark mode.
- Multi-colour icons and logos: Create dark mode versions. Avoid pure white fills, remove light outlines, and use slightly lighter colours for better visibility.
- Images and photos: Don’t invert them. Instead:
- Place them on slightly lighter dark surfaces (not pure black)
- Reduce brightness slightly to avoid harsh glare
- Use separate dark-mode images for key visuals when needed
For scalability, use colour tokens in SVGs so icon colours update automatically across themes.
The goal is simple. That is, to ensure that assets feel natural in dark mode, and not artificially flipped or visually jarring.
6. Maintain Brand Identity Across Light and Dark Themes
Dark mode shouldn’t feel like a different product. Your brand should still be clearly recognisable across both light and dark themes.
The idea is to keep core brand elements consistent, like primary colours, typography, and visual style, while adapting backgrounds and supporting colours to suit dark mode.
When adapting brand colours for dark mode:
- Slightly reduce saturation so colours don’t feel too bright or harsh.
- Avoid colour combinations that vibrate or strain the eyes.
- Adjust brightness or warmth slightly so colours feel natural on dark backgrounds.
To keep everything consistent at scale, create a dark mode brand guide that defines colours, typography, components, and usage rules across themes.
After all, the aim is to make your product look and feel like the same brand, just in a different environment.
7. Build Smart System Integration and a User-Controlled Toggle
A well-designed dark mode only works if users can access it easily, and on their own terms.
Begin by following the system preferences. If a user has enabled dark mode on their device, your product should automatically match it. This creates a seamless, no-effort experience.
At the same time, always provide a manual toggle so users can override the system when needed.
Common toggle options include:
- System (default): Follows device settings
- Light: Always stays in light mode
- Dark: Always stays in dark mode
You can also use a simpler Light or Dark toggle, but it removes the flexibility of system-based switching.
Place the toggle where users can easily find it, like settings, navigation, or onboarding.
Further, advanced options are:
- Time-based switching: The interface automatically switches between light and dark mode based on time (e.g., light during the day, dark at night). This is useful for apps with high evening usage, like reading or social media, as it reduces eye strain without requiring manual changes.
- Context-based switching: The interface adapts based on the user’s environment, such as ambient lighting conditions. For example, switching to dark mode in low-light settings. While less common, it can improve comfort in apps where lighting conditions frequently change.
In short, follow user preferences but always allow them to override.
8. Design for Accessibility From the Start
Accessibility in dark mode goes beyond contrast. It’s about making your interface usable for people with different visual needs, like colour blindness, light sensitivity, and low vision.
Dark mode can create specific challenges:
- Some users find light text on dark backgrounds harder to read.
- Secondary elements (like placeholders or disabled text) often lack enough contrast.
- Focus states (for keyboard navigation) can become hard to see.
- Bright or high-contrast animations can feel harsh in dark settings.
To design better, keep in mind the following best practices:
- Don’t rely on colour alone. Use icons, labels, or patterns to show meaning.
- Ensure focus states are clearly visible with strong outlines.
- Test your designs for colour blindness using available tools.
- Make sure all text and UI elements remain readable, and not just primary content.
9. Test Dark Mode Usability With Real Users and Real Devices
Design and build quality in dark mode can only be verified through structured testing. Only then will you be able to understand whether it is actually working for users.
Test in different lighting conditions:
- Low light: Check comfort and readability (primary use case).
- Indoor light: Ensure contrast works for everyday usage.
- Bright/outdoor light: Test visibility under harsh conditions.
Make sure to evaluate the following:
- Readability: Is all text (including secondary and disabled) easy to read?
- Navigation: Can users clearly identify clickable elements and hierarchy?
- Focus states: Are interactive elements visible during keyboard use?
- Overall feel: Does dark mode look as polished and on-brand as light mode?
Including diverse users is crucial. Test with people who have light sensitivity, wear glasses, are older, or have colour vision differences. This helps catch real accessibility issues early.
Always test on real devices. Screens vary widely across devices. OLEDs and LCDs show dark mode differently, and brightness changes based on the environment.
Devices to test on are as follows:
- iPhone (OLED)
- Android flagship (AMOLED)
- Mid-range Android (LCD)
- Tablet
- Desktop browser
The goal is to ensure your dark mode is dependable across devices, lighting conditions, and users.
10. Optimize Dark Mode for Mobile Performance and OLED Screens
Dark mode is not only a visual choice. In fact, it affects performance, especially on mobile devices.
On OLED and AMOLED screens, each pixel lights up individually. When a pixel displays black, it turns off completely, which helps save battery. This means darker backgrounds can significantly reduce power usage. For example, using a deep grey can still deliver strong battery savings while maintaining better visual comfort than pure black.
However, this benefit does not apply to LCD screens. LCDs use a constant backlight, so power consumption stays the same regardless of the colours shown. In these cases, dark mode should be designed for comfort and readability rather than battery savings.
From a design perspective, colour choices directly impact efficiency. Pure black offers the highest battery savings, while dark greys provide a balance between performance and usability. Lighter colours increase power usage, so use them thoughtfully. It’s important to use an efficient implementation:
- Prefer CSS variables (tokens) for theme switching as they’re faster and smoother
- Avoid heavy class-based toggling, which can cause glitches or flashes during load
- Combine system preferences with manual overrides for a seamless experience
Ultimately, a well-designed dark mode needs to perform smoothly, adapt to different screen types, and deliver a consistent experience across all parts of the product.
When Should You Use Dark Mode in Your Product Design?
Truth be told, not every product needs dark mode, and not every product should implement it under the same conditions. A combination of user context, product category, and business priority should guide the decision to invest in dark mode design.
Dark mode is particularly well-suited to:
- Content consumption products – Streaming platforms, reading apps, news applications, and media players, where prolonged screen time in low-light environments is common.
- Developer and productivity tools – Code editors, terminal interfaces, project management platforms, and design tools where users spend extended hours in front of screens.
- Enterprise SaaS dashboards – Data-heavy interfaces that benefit from reduced ambient light during analytical tasks.
- Social media and communication platforms – where usage patterns extend into evenings and nighttime, and where dark mode reduces visual fatigue.
Dark mode is less critical, though still potentially valuable, for:
- High-frequency transactional products like banking applications or checkout flows, where cognitive clarity and trust signals are paramount.
- Brand-forward consumer products where the light palette is central to the brand experience and dark mode risks diluting it.
- Form-heavy SaaS products where users primarily engage during business hours in well-lit office environments.
Ultimately, the decision should be driven by user research, usage context, and the maturity of your design system. At Onething Design, we view dark mode as a strategic design investment, and not a default obligation, of course. When implemented thoughtfully and for the right product context, it delivers meaningful returns in usability and experience.
Dark Mode UI Design: Case Studies From Leading Products
Looking at how top products implement dark mode offers practical insights into what works.
Spotify
Spotify is a dark-first product, built around dark mode from the start. It uses a pure black background to make album artwork stand out, with its signature green used consistently for actions. Layered dark greys create a clear hierarchy, while dynamic colours from album art add depth and visual interest. The result is a strong, content-first experience that feels true to the brand.
Image Source: HongkiatYouTube
YouTube uses a near-black background to balance comfort and contrast. It clearly separates different sections like video content, controls, and navigation using subtle surface differences. Text is carefully structured across multiple levels to ensure readability, even for secondary information. This makes it easier to handle bright thumbnails within a dark interface.
Linear
Linear takes a minimal and focused approach. It uses a limited colour palette, clean typography, and strong contrast for clarity. Focus states are highly visible, supporting keyboard navigation. Dark mode is the default, reflecting a clear design choice. The interface feels calm, consistent, and highly usable.
Make Dark Mode Work Across Every Screen.
Dark mode is a signal of craft. When done right, it reduces eye strain, improves accessibility, communicates brand maturity, and keeps users engaged longer. But getting there requires more than flipping a color palette. It means managing contrast ratios, elevation through shadow and opacity, and thoughtful handling of imagery and typography across every screen state.
At Onething Design, we help product teams build interfaces that hold up across real-world conditions, devices, and users. Dark mode is one of those details that separates good design from great product thinking.
If you’re redesigning your UI, launching a new product, or just want a sharp second opinion on your current design system, let’s get on a call. We’d love to dig in.
Book a Free Strategy Call With Our Team.