Dark mode UI design: Best practices and examples

Dark mode isn’t just some trendy new design fad — it’s actually been around longer than light mode. Yep, early computer screens were all dark backgrounds with glowing green text, kind of like Karen from SpongeBob. Those old-school monochrome monitors used green phosphor coatings to display text and graphics.

And as computers evolved — I’m talking of when graphical user interfaces (GUIs) emerged in the 80s — designers and developers applied a skeuomorphic approach. They wanted screens to feel more familiar — so they mimicked white printed paper.

That’s how light mode became the default. It ruled for decades, until dark mode made a comeback in the 2010s. Why? Because users wanted it. Turns out, dark mode isn’t just easy on the eyes — it comes with real benefits, which we’ll get into.

What is dark mode UI?

Dark mode UI is exactly what it sounds like — a design where the background is dark (not necessarily black), and the text and interface elements are light (not necessarily white). It’s a carefully designed alternative to light mode, not just an inverted color scheme.

A unique touch to the dark mode

Dark mode backgrounds don’t necessarily have to be pure black (#000000). Many brands opt for unique, carefully chosen shades to enhance user experience.

For instance, Figma uses a dark shade of gray, almost black (#1E1E1E). YouTube employs a very dark gray, slightly lighter than pure black (#181818). And Slack uses a very dark shade of gray, extremely close to black (#1D1D1D):

What dark mode UI is not

First off, dark mode isn’t some secret interface for the dark web. And no, it’s not just light mode flipped inside out. If you’ve ever used an auto-invert setting, you know it’s a mess — colors get weird, images look off, and the whole thing feels unnatural.

Take X, for example. When switching from light to dark mode, images remain consistent, and the interface still feels intentional. But if you use an auto-invert filter, everything looks… wrong. That’s because dark mode needs to be thoughtfully designed, not just reversed.

Many also perceive dark mode as inherently “sleek” or “premium.” While it has worked for certain brands, like Apple and Chanel, that doesn’t mean every dark-themed interface automatically means luxury. Platforms like Discord, for example, use dark mode for better readability, rather than as a luxury aesthetic. Similarly, developer tools like Visual Studio Code and GitHub’s dark mode prioritize functionality over premium appeal.

---

---

Dark mode UI in different design systems

Different design systems have their own best practices for implementing dark mode. Below is a comparison of how Material Design, Apple’s Human Interface Guidelines, and other major design frameworks approach it:

Design system	Color strategy	Contrast guidelines	Adaptive behavior
Material Design	Uses a dark theme surface hierarchy with elevation overlays. Ensures accessible contrast.	Minimum contrast ratio of 4.5:1 for text. Uses elevation to modify shades.	Supports auto-toggling based on system settings. Encourages seamless transitions.
Apple Human Interface Guidelines	Encourages pure black backgrounds for OLED devices but allows dark gray for readability.	Minimum contrast ratio of 7:1 for body text. Prioritizes legibility in low-light settings.	Integrates with system-wide dark mode settings. Adapts iconography and depth accordingly.
Fluent Design (Microsoft)	Uses ‘mica’ and ‘acrylic’ materials to create depth while maintaining contrast.	Uses contrast-friendly tints to ensure readability across Windows devices.	Supports dynamic theming based on Windows settings. Uses transparency effects.
IBM Carbon Design	Applies a layered color system with specific token-based theming for consistency.	Focuses on high contrast while maintaining brand identity and color accessibility.	Emphasizes modular UI components that adapt based on user preferences and accessibility needs.

Benefits of dark mode UI

As we’ve already established, dark mode isn’t just about looking cool. It actually has some solid perks, and here’s why UX designers should care:

• Reduces eye strain — Dark mode reduces the harsh contrast between the screen and your environment, making it easier on the eyes, especially in low-light settings or at night. Plus, it cuts down on blue light exposure, which can mess with your sleep cycle
• Saves battery life — If a device has an OLED or AMOLED screen (like most modern smartphones), dark mode can actually help save power. Unlike LCDs, OLED pixels don’t need energy to display black, meaning dark mode can help extend battery life
• Enhances comfort — For users who spend hours staring at screens, dark mode can be a more comfortable alternative, reducing glare and screen fatigue

Challenges of dark mode UI

Dark mode isn’t perfect, and it’s not for everyone. Here are some things designers need to keep in mind:

• Poor visibility in bright environments — Dark backgrounds cause glare in direct sunlight, making text harder to read
• Not great for everyone — Users with astigmatism (about 47% of the population) might find light text on dark backgrounds harder to read due to the “halation effect,” which causes blurring
• Accessibility concerns — Older users or those with visual impairments may struggle with dark mode, as high contrast (black text on white) is generally easier to read

Context matters: Tailoring dark mode UI for different users

The effectiveness of dark mode isn’t just about personal preference — it also depends on time of day, location, and device type:

• Time of day — Many users prefer dark mode at night or in dim environments to reduce eye strain. However, in daylight or well-lit rooms, light mode often provides better readability
• User location — Someone working indoors in a controlled lighting environment may find dark mode more comfortable, while an outdoor user might struggle with screen glare
• Device type — Dark mode may enhance battery life on OLED/AMOLED smartphones, but on desktop monitors, the power savings are minimal. Also, larger screens may require different contrast adjustments to maintain readability

Best practices for dark mode UI design

To create a well-designed dark mode experience, follow these best practices:

Give users the choice to switch

Dark mode shouldn’t be forced. Offer a toggle so users can switch between light and dark mode based on their preference.

Websites like MDN Web Docs use a dropdown menu to let users pick:

• OS Default (matches system settings)
• Dark Mode
• Light Mode

Other sites, like WAKU, use a simple sun/moon icon toggle — clean, intuitive, and user-friendly.

When hovering over the moon icon, it brings up a tooltip letting you know you can switch between dark and light mode, and still tells you which mode you are currently on. It’s amazing:

When switched to light mode, the moon switches to a sun icon, and when hovering over the sun, it brings on a similar tooltip as when it did with the moon:

Both MDN Web Docs and WAKU provide a seamless way to switch themes, but they approach it differently — one through a structured dropdown, the other with a minimalist icon toggle.

Regardless of the method, the key takeaway is clear. Give users control.

Maintain proper contrast

One thing that can make your dark mode design look off is using a single solid background. This would make the UI elements blend — and reduce depth and readability.

That’s why I prefer using color surface variants to create visual separation and hierarchy. I’ll talk about them now.

Color surface variants are different shades of the base background color used to create depth, contrast, and clarity in an interface. Instead of everything sitting on the same flat background, you’d use subtle variations in color to help distinguish different UI elements without needing strong borders or dividers.

For dark mode, specifically, this would mean using different shades of dark rather than a single black background. So, instead of making everything pure black (#000000), designers should apply slightly different dark tones to separate UI elements and improve readability.

Look at how Spotify uses three different shades of black to create depth and contrast:

• #000000 (Pure Black) — The main background, providing the darkest base layer
• #121212 (Foreground) — All the primary content lives here, including artist names, album covers, and podcast listings
• #1F1F1F (Navigation & UI Elements) — Used for navigation elements, such as the search bar, helping them stand out subtly from the foreground and background

Keep branding consistent

Dark mode shouldn’t completely change your brand’s identity. Adjust color shades to maintain consistency, ensure logos and icons stand out, and keep typography styles the same.

Optimize images and icons

Icons and images should be visible in both light and dark modes. If an image fades into the background, add a subtle border or tweak the color to maintain visibility.

For example, this circle icon below would have faded in the dark background if I had not added a white border around it:

The white border does not change the fact that it’s still a circle icon, it just made it stand out. I could have also changed the icon colour to white in the dark background, but I wanted to maintain its colour, so the white border was the best option. So, always find a way to make sure whatever image or icon you use on either mode is visible and optimized.

Use desaturated colors for accessibility

I see a lot of dark mode UI designs using highly saturated colors, which can cause visual discomfort and reduce readability. Bright, neon-like colors on dark backgrounds can feel harsh and create excessive contrast, making text and interface elements harder to read.

Instead, desaturated colors — which are slightly muted versions of vibrant hues — help create a more visually balanced and accessible experience.

Material Design recommends using colors that are slightly toned down when designing for dark mode to ensure legibility and prevent eye strain.

Conclusion

When it comes to dark mode UI design, there are four points of focus for you as a UI/UX designer:

• User choice matters
• Contrast is key
• Consistency counts
• Optimizing visual assets

And certain industries naturally benefit more from dark mode.

Entertainment and gaming platforms, for example, leverage dark interfaces to create immersive experiences that draw users deeper into their digital worlds. Financial apps and dashboards also benefit, as dark backgrounds effectively highlight critical data, graphs, and numbers, reducing cognitive load and improving readability during prolonged usage.

Ultimately, dark mode UI design isn’t a one-size-fits-all solution. It’s about designing intentionally, understanding your users, and making informed decisions to enhance usability and aesthetics.