How to Design Dark Mode That Actually Looks Good in 2026

Dark mode is everywhere now, from operating systems to banking apps to code editors. Yet many dark themes still look muddy, harsh, or hard to read. The difference between a dark mode that feels polished and one that feels like an inverted light theme usually comes down to a handful of decisions about colour, contrast, depth, and testing. This guide covers those decisions in order.

Direct answer: Good dark mode uses dark grey surfaces instead of pure black, desaturated colours, and text in off-white rather than pure white. It creates depth with lighter surface tones instead of shadows, meets WCAG contrast guidance for body text, respects the system appearance setting, and is tested on real devices in low light.

Why Pure Black and Pure White Usually Fail

Pure black backgrounds with pure white text look striking in a mockup, but they cause problems in real use. The extreme contrast creates a halo effect, sometimes called halation, where bright text appears to bleed into the dark background. For many readers, especially at small sizes or in low light, this makes text harder to read and more tiring over a long session.

Pure black also wastes a design opportunity. On OLED screens, true black pixels are switched off, which can save battery, but a single flat black surface gives you nowhere to go. You cannot show hierarchy if every surface is the same black. Dark grey surfaces, by contrast, give you a range of tones to work with, so cards, sheets, and menus can sit at visibly different levels.

The same logic applies to text. Pure white on dark grey is still very high contrast, and it can feel glaring at night. Off-white tones, such as a light grey with a hint of warmth or coolness matched to your brand, read as white to the eye while being noticeably gentler. The Material Design dark theme guidance recommends exactly this approach, and it remains the clearest reference for dark colour choices.

Building a Dark Colour Scale

A dark theme needs a scale, not just one background colour. Start with a base surface, then define steps above it for raised elements, and a matching scale for text and borders. A practical starting point is a base near very dark grey, such as #121212, with raised surfaces stepping up through tones like #1E1E1E, #242424, and #2C2C2C. These values are starting points, not rules, and your brand colour should influence the tint.

Next, desaturate your brand and accent colours. A saturated blue or red that looks lively on white can vibrate or glow on a dark background. Reducing saturation by a noticeable step, and sometimes lightening the colour slightly, keeps accents readable without shouting. Test accent colours on every surface level, not just the base, because a colour that works on the darkest surface may fail on a raised card.

For a grounding in how colour relationships work generally, color theory for beginners covers hue, saturation, and value in plain terms. Those basics matter more in dark mode, where small shifts in value carry most of the hierarchy.

Contrast and Readability

Contrast is the single most important technical check in dark mode. Body text needs enough contrast against its background to be readable for people with low vision, and that bar is higher than many designers assume. The Web Content Accessibility Guidelines (WCAG) define contrast ratios for normal text and large text, and aiming for the WCAG AA level is a sensible minimum for body copy, with AAA as a stretch goal for critical content.

Secondary text is where dark themes most often fail. Captions, timestamps, and helper text are tempting to set in a dim grey, but dim text on a dark background quickly becomes unreadable, especially on a phone in sunlight or on an older screen. If secondary text is worth showing, it is worth making readable. Either raise its lightness or shorten it.

Use a contrast checker, such as the WebAIM Contrast Checker or the built-in checks in Figma plugins, on every text and background pairing in your scale, not just the main one. A palette that passes on the base surface can fail on a raised card or a coloured banner, and those are exactly the places users read important information.

Elevation and Depth Without Shadows

In light mode, shadows create depth: a card floats above the background because its shadow says so. In dark mode, shadows are far less visible, because a dark shadow on a dark background blends in. Material Design’s answer is to use lighter surfaces for higher elevation instead. A modal that sits above the main content should be a lighter grey than the content behind it, and the gap between the two tones should be visible at a glance.

Overlays deserve special care. When a dialog opens, dim the background behind it slightly so the dialog reads as the active layer, and make sure the dialog surface itself is lighter than the dimmed background. Spacing plays a role here too, and what is white space in web design explains how breathing room supports hierarchy in any theme, dark included.

Handling Images and Illustrations

For illustrations and icons, build dark variants. Line icons drawn in dark grey for light mode need a light version for dark mode, and filled icons may need adjusted weights. Illustrations with large white areas should be redrawn or recoloured for dark backgrounds, or placed inside a defined card so the light area is contained. Logos need the same treatment: a dark logo on a dark background simply disappears, so keep a light or mono reversed version ready.

Respecting System Preferences

On the web, the prefers-color-scheme media query in CSS lets a site follow the system setting automatically, and modern frameworks and Tailwind CSS support a class-based or media-based dark variant out of the box. In native apps, the system appearance APIs on iOS and Android do the same job. Offer a manual override as well, for users who want a different theme in one app, and remember their choice. A three-option setting, light, dark, and system, covers almost everyone.

Designing Dark Mode Step by Step

1. Audit the light theme. List every surface, text style, border, icon, and accent colour. Dark mode is a translation of this list, not a fresh design.
2. Define the dark surface scale. Choose a dark base, two or three raised levels, and an overlay level, all with a subtle brand tint.
3. Translate text styles. Map each text style to an off-white or muted light grey, then check contrast on every surface it appears on.
4. Desaturate accents and charts. Adjust brand colours, success and error colours, and chart palettes for dark backgrounds.
5. Build dark image and icon variants. Cover logos, illustrations, icons, and empty states before launch, not after complaints arrive.
6. Wire up system preference. Follow prefers-color-scheme on the web or the system appearance setting in apps, plus a manual override.
7. Run the testing checklist below. Fix contrast, OLED, and low-light issues before shipping, and recheck after every palette change.

Testing Checklist: Contrast, OLED, Low Light, Accessibility

• Contrast: Check every text and background pairing against WCAG guidance with a contrast checker, including secondary text, disabled states, and text on coloured banners.
• OLED: Test on an OLED phone and an LCD phone. Pure black areas behave differently on each, and banding or colour shift can appear on OLED at very low brightness.
• Low light: Test in a dark room at low brightness, and in bed at night, which is when many users actually use dark mode. Text that passes in a bright office can fail here.
• Accessibility: Run through the website accessibility checklist, test with a screen reader, and confirm the theme works with reduced motion and increased text size settings.

Frequently Asked Questions

Should dark mode use pure black backgrounds?

Usually not. Pure black makes hierarchy hard, because every surface is the same tone, and pure white text on pure black can cause a halo effect that tires the eyes. Very dark grey surfaces, such as tones around #121212, give you room to show elevation and feel gentler during long reading sessions, while still looking properly dark.

What text colour works best in dark mode?

Off-white works better than pure white for body text, because it keeps contrast high without the glare of full white. Secondary text should be a muted light grey, but still checked for contrast, since dim grey on dark grey is a common readability failure. Avoid thin font weights at small sizes, which can disappear against dark backgrounds.

How do you handle shadows in dark mode?

Replace shadows with lighter surfaces. In dark mode, a card or dialog should sit at a lighter grey level than the background behind it, so elevation is visible as a tonal step rather than a shadow. This approach, recommended in Material Design guidance, is easier to maintain consistently than trying to tune dark shadows that barely show.

Should a website follow the system dark mode setting?

Yes, in most cases. Users set their preference once at the system level and expect sites and apps to follow it. On the web, the prefers-color-scheme media query handles this automatically. Offer a manual light, dark, and system override as well, and remember the user’s choice so they do not have to set it on every visit.

Does dark mode save battery?

On OLED screens, dark mode can save battery, because black pixels are switched off and dark pixels draw less power. The saving depends on how much of the screen is dark and on brightness, so a dark grey theme saves less than pure black. On LCD screens, where the backlight stays on regardless, the saving is negligible, so battery alone is not a reason to ship dark mode.

Conclusion

Good dark mode is not an inverted light theme. It is a separate colour system built from dark grey surfaces, desaturated accents, off-white text, and tonal elevation instead of shadows. The work is mostly disciplined checking: contrast on every surface, images and icons in dark variants, system preference respected, and testing on real devices in low light and sunlight. Get those checks right, and dark mode stops being a feature users tolerate and becomes one they genuinely prefer. Start with contrast, then test on real devices.