Designing for Dark Mode: UX Best Practices

What dark mode actually is and why it matters for your product

Dark mode is a color scheme where backgrounds are dark and text or UI elements are light. iOS, Android, macOS, and Windows have offered it natively since 2019, and adoption has been fast: in a March 2020 Android Authority poll of 2,514 readers, 81.9% used dark mode everywhere it was available. That is a poll among readers of a tech publication rather than a representative sample of all users, but the direction is clear.

For a business launching a digital product, dark mode is no longer optional. If your site or app doesn't support it, a portion of your users will be navigating a white-blazing interface in the middle of the night, and that directly affects time on site and conversion rates.

The real question is not whether to implement dark mode, but how. A poorly executed dark mode is worse than none at all. It signals inattention to detail, which is the last thing a premium product can afford.

The most common mistake: inverting colors

Many developers reach for CSS invert() or simply swap #ffffff for #000000. The result looks amateurish and creates real readability problems.

Why pure black is a problem

On a fully black background (#000000), pure white text (#ffffff) creates a contrast ratio so high that eyes tire quickly. The phenomenon is called halation: letters appear to glow and become difficult to read across long text blocks. Google's Material Design explicitly advises against pure black in dark mode.

The fix: use a dark gray as your base background. Recommended values for the primary background sit between #121212 and #1e1e1e. Overlapping elements (cards, modals, sidebars) receive progressively lighter tones, creating visual depth without harsh brightness.

Surfaces, not a single background

A mature dark mode doesn't have one black background. It has a surface system. Think of it as layers of paper stacked in a dimly lit room: each layer above reflects a little more light. In practice, a card on the main background might be #1e1e1e when the page background is #121212, and a dropdown within that card might be #2c2c2c.

At Design Creator Lab, we apply this surface system in every Next.js and React project we deliver. It ensures visual consistency regardless of which component or page you're looking at.

Color and contrast: rules you cannot ignore

WCAG 2.1 (Web Content Accessibility Guidelines) requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (above 18pt or 14pt bold). These thresholds apply equally in light and dark mode. Many designers follow these rules in light mode and discard them entirely when switching to dark.

Saturation drops in dark mode

A vibrant brand color on a white background looks great. The same color on a dark background can look aggressive or, paradoxically, washed out, depending on its luminance value. The practical rule: reduce saturation of primary colors by 15-30% in dark mode and increase brightness slightly.

For example, a brand blue of #0057FF optimal on white becomes approximately #4D8EFF in dark mode: lighter, less saturated, maintaining readability without straining the retina.

Don't forget semantic colors

Green for success, red for error, yellow for warning. These semantic colors need adjustment too. An error red of #FF0000 on a near-black background creates contrast that can cause visual discomfort. A #FF6B6B or #FF8A80 communicates the same urgency with less visual stress.

In a management platform project we delivered for a company in Romania in 2024, we redefined all semantic colors for dark mode independently, not as automatic derivations from the light mode palette. The difference was measurable in usability testing: users reported significantly less visual fatigue during long working sessions.

Typography in dark mode: what changes

Font choices and text colors require specific adjustments for dark mode. Swapping color: black to color: white is not enough.

Font weight matters more than you think

On dark backgrounds, light-weight fonts (light, thin) become hard to read. A 300-weight font that looks elegant on white can appear thin and unclear on dark. The recommendation: use weight 400 (regular) as the minimum for body text in dark mode. If you used 300 in light mode, move to 400 in dark mode.

Text color: not pure white

Just as the background shouldn't be pure black, the primary text shouldn't be pure white. Use an off-white: #E0E0E0 or #F0F0F0 for primary text, and a medium gray for secondary text (#9E9E9E or similar), always verifying WCAG contrast ratios.

Less important text (metadata, timestamps, secondary labels) can use even more muted colors, but never below a 3:1 ratio against the background. This is not an aesthetic guideline. It is an accessibility requirement that also affects SEO, since Google penalizes pages with insufficient contrast.

Line-height and letter-spacing

On dark backgrounds, small increases in line height (line-height: 1.6 versus 1.5) and letter spacing (letter-spacing: 0.01em) improve readability without visible aesthetic change. These are five-minute adjustments that matter at scale.

Images, icons, and graphics in dark mode

This is the chapter most guides skip, and it is one of the main reasons dark mode looks bad in production.

Photographs don't invert

A product photo or team photo looks the same in dark mode and light mode. You don't modify it dynamically, and you can't. What you can control is the background it sits on and any shadow or border separating it from the page. On a dark background, a white box shadow is absurd. Use surface layers or thin borders instead of shadows.

Logos and icons: separate versions

If your logo has a dark variant and a light variant, serve them dynamically with CSS prefers-color-scheme or JavaScript. A logo with black text on a dark background is invisible. A white logo on a white background is equally invisible. The best implementations we deliver include a complete asset set: primary logo, inverted logo, adapted favicon, and adapted og:image.

Inline SVG icons are the easiest to adapt: you change fill or stroke via CSS variables and need no duplicate files.

Illustrations and charts

Vector illustrations built for light mode can look jarring on dark, especially if they have hardcoded white backgrounds. The clean solution is to build illustrations with transparent backgrounds and colors that work across both schemes. When the project budget allows, you create dedicated dark mode variants.

Technical implementation: CSS, JavaScript, and preference detection

The user's dark mode preference is exposed by the system through the prefers-color-scheme: dark media query. You can detect it in CSS without JavaScript and automatically apply the appropriate theme.

CSS custom properties: the foundation of any serious implementation

A design token system based on CSS custom properties is the only scalable approach to dark mode. You define semantic variables, not raw values:

• --color-background: the primary page background
• --color-surface: the color for cards and elevated surfaces
• --color-text-primary: the main text color
• --color-text-secondary: supporting text color
• --color-accent: the brand color adjusted per theme

You redefine these variables under @media (prefers-color-scheme: dark) or under a .dark class applied to the html element. The rest of your CSS uses only the variables, never hardcoded values. This means adding a new component and having it respect both themes automatically, with no additional code.

Manual toggle: let users choose

Auto-detecting the system preference is the starting point, not the endpoint. Provide a manual toggle in the interface. Save the preference in localStorage and apply the theme before the page renders (synchronous script in <head>), otherwise users will see a flash of the wrong color scheme on every page load.

This technical detail is what separates a dark mode that feels native from one that flickers on load. A minor detail that says a great deal about the overall quality of a digital product.

Testing dark mode in real projects

Test on real devices, not just DevTools. A MacBook Pro with a Retina display and a mid-range Android phone with an OLED screen render colors differently. What looks fine in Chrome's simulator can look different on a Samsung Galaxy with an AMOLED panel, where pure black is genuinely pure black and contrast can become extreme.

Conclusion: dark mode is a design decision, not a feature checkbox

A well-implemented dark mode reduces visual fatigue during long sessions, conserves battery life on OLED screens, and communicates attention to detail, a marker of digital product maturity. A poorly implemented dark mode does the opposite.

The concrete steps to start from:

1. Define a surface system based on dark grays, not pure black.
2. Adjust brand color saturation and brightness for dark mode independently.
3. Verify contrast ratios for every text-background combination using a dedicated tool (Stark, Colour Contrast Analyser).
4. Adapt font weights and line heights for readability on dark backgrounds.
5. Build graphic assets with dark variants or transparent backgrounds.
6. Implement CSS custom properties as a unified token system and provide a manual toggle.

At Design Creator Lab, we treat dark mode as an integrated part of the design system, not a stage added at the end of a project. If you're building a custom digital product or website and want to do it right from the start, let's talk through what your project needs.