Dark Mode Design: A Practical Guide for UI Designers

Dark mode has gone from a niche preference to an expected feature. Operating systems support it, users switch to it at night or keep it on permanently, and products without it can feel dated.

The mistake many teams make is treating dark mode as a color inversion: swap white for black, black for white, and ship. The result is harsh contrast, glowing colors, invisible shadows, and broken hierarchy. Good dark mode requires its own design decisions. This guide covers the important ones.

Why people use dark mode#

Understanding why people choose dark mode helps you design it well:

• Comfort in low light. Bright screens in dark rooms are uncomfortable.
• Preference and focus. Some people simply prefer it, or find it less distracting.
• Battery savings on OLED screens, where dark pixels use less power.
• Accessibility needs. Some people with light sensitivity find dark interfaces easier.

Note that dark mode isn't automatically better for readability. Many people read long text more comfortably in light mode. That's why dark mode should be a choice, ideally following the system setting with an option to override it.

Rule 1: Avoid pure black for large surfaces#

Pure black backgrounds with pure white text create extreme contrast that can cause eye strain and a "halation" effect, where text appears to glow or blur, especially for people with astigmatism.

Use dark grays instead, typically in the range of very dark charcoal. Many design systems use a dark gray around 10 to 12 percent lightness as the base surface. Pure black can still work for specific cases, such as OLED-focused media apps, but test carefully.

Rule 2: Use lighter surfaces for elevation#

In light mode, shadows show elevation: cards and menus float above the background. In dark mode, shadows are barely visible against dark surfaces.

Instead, express elevation with lightness. Higher surfaces are slightly lighter:

• Background: darkest.
• Cards and containers: a step lighter.
• Menus, popovers, and dialogs: lighter still.

This mimics how light would hit raised surfaces and keeps hierarchy clear. Subtle borders can also help separate surfaces when the difference in lightness is small.

Rule 3: Don't use pure white for text#

Just as pure black backgrounds are harsh, pure white text on dark gray can be too intense for long reading. Use an off-white for primary text and progressively dimmer grays for secondary and tertiary text.

Many systems express this as opacity levels or as specific gray tokens. Either way, define them deliberately and check contrast.

Rule 4: Meet contrast requirements#

Dark mode must meet the same accessibility standards as light mode: at least 4.5:1 for normal text and 3:1 for large text and essential UI elements. Secondary text is where dark themes most often fail — dim gray text on dark gray backgrounds can look stylish and be unreadable.

Check every text and background pairing, including text on elevated surfaces, which have slightly less contrast with light text than the base background.

Rule 5: Desaturate bright colors#

Brand and status colors designed for light backgrounds often look too intense on dark ones. Fully saturated colors can appear to vibrate against dark surfaces and strain the eyes.

For dark mode:

• Use lighter, less saturated versions of accent colors.
• Check that primary buttons and links still meet contrast requirements.
• Adjust status colors — error red, success green, warning amber — so they're readable without glowing.

Your brand color doesn't need to be identical in both themes. It needs to be recognizable and accessible in both.

Rule 6: Rethink shadows and borders#

Shadows that create depth in light mode often disappear or look muddy in dark mode. Options include:

• Reducing reliance on shadows and using surface lightness instead.
• Using darker, more diffuse shadows where they're still needed.
• Adding subtle light borders to define edges of cards and inputs.

Input fields in particular need clearly visible borders or background contrast so people can see where to click.

Rule 7: Handle images and illustrations#

Images designed for light backgrounds can look jarring in dark mode:

• Illustrations with white backgrounds become bright rectangles. Use transparent backgrounds or provide dark versions.
• Very bright photos may need slight dimming to avoid overpowering the interface.
• Logos may need inverted or adjusted versions to remain visible.
• Charts and data visualizations need palettes checked against dark backgrounds.

Rule 8: Use semantic color tokens#

The single most important technical decision for dark mode is using semantic tokens. Instead of hardcoding colors like "gray-900" in components, use role-based tokens like "surface/default," "text/primary," and "border/subtle."

Each token then maps to different values in light and dark themes. Components don't change; only the mapping does. Without semantic tokens, dark mode becomes a painful exercise in finding and overriding hundreds of hardcoded values.

In Figma, variables with light and dark modes let you preview entire screens in both themes instantly.

Rule 9: Keep hierarchy intact#

Check that hierarchy still reads correctly in dark mode. The primary action should still be the most prominent element. Headings should still stand out from body text. Selected states should still be obvious.

Sometimes elements that were subtle in light mode become too prominent in dark mode, or vice versa. Review full screens, not just individual components.

Rule 10: Respect user preference#

Implementation matters as much as design:

• Follow the operating system setting by default.
• Offer an in-app override: light, dark, or system.
• Remember the user's choice.
• Avoid a flash of the wrong theme when pages load.
• Apply the theme consistently, including emails, embedded content, and system UI like scrollbars where possible.

Rule 11: Test in real conditions#

Dark mode looks different on different screens and in different lighting:

• Test on OLED and LCD screens.
• Test in a dark room and in daylight.
• Test at low screen brightness.
• Test with accessibility settings like increased contrast.

Subtle differences between surface levels can disappear on some screens, so make sure hierarchy holds up across devices.

A theme, not a filter#

Good dark mode is designed, not generated. It uses dark grays instead of pure black, lighter surfaces for elevation, softened text, desaturated colors, adjusted imagery, and semantic tokens that make both themes maintainable.

Treat dark mode as a full theme with its own decisions, and test it as carefully as your light theme. Users who choose it will notice the difference.