Designing for Dark Mode: Colors, Contrast & Best Practices

Why dark mode isn't just inverting colors — and how to build palettes that work beautifully in both light and dark themes.

Dark mode has evolved from a niche developer preference to a mainstream expectation. Major operating systems, browsers, and apps now support it, and studies suggest that over 80% of smartphone users have tried dark mode at some point. If you're building a website or application in 2026, supporting dark mode isn't optional — it's a baseline user expectation.

But implementing dark mode well is harder than it looks. Simply inverting your light palette — white becomes black, dark text becomes light — produces results that feel harsh, lifeless, and difficult to read. Good dark mode design requires understanding how color behaves differently on dark surfaces and making deliberate adjustments to your entire palette.

Why Not Just Invert?

Pure black backgrounds (#000000) with pure white text (#FFFFFF) create a contrast ratio of 21:1. That sounds ideal from an accessibility perspective, but the extreme contrast actually causes visual problems. On OLED screens, pure black pixels are completely off while white text pixels are fully lit, creating a halation effect — a subtle glow around letterforms that makes text harder to read, not easier. The effect is more pronounced for users with astigmatism, which affects roughly one-third of the population.

Additionally, inverting saturated colors from your light palette produces neon-like results on dark backgrounds. A brand blue that looks professional and trustworthy on white can look garish and overwhelming on near-black. The reason is perceptual: bright, saturated colors emit more light on dark backgrounds, making them feel more intense than the same colors on light backgrounds.

Dark Mode Surface Hierarchy

In light mode, elevation is typically communicated through shadows — higher elements cast larger shadows. In dark mode, shadows are invisible against dark backgrounds, so elevation is communicated through surface lightness instead. Higher surfaces are lighter; lower surfaces are darker.

Build your dark theme with at least four surface levels. The base background should be a very dark gray, not pure black — #121212 to #1A1A1A works well. The first elevation level (cards, panels, sidebars) should be slightly lighter, around #1E1E2E. The second level (dropdowns, modals, popovers) goes lighter still, around #252538. The highest level (tooltips, elevated cards) might reach #2C2C3E. This creates a subtle but perceivable layering system that replaces shadows.

Notice that these backgrounds aren't pure neutral grays — they have a slight cool tint (toward blue or purple). Tinted dark surfaces feel more refined and intentional than pure grays, and they allow your brand colors to shine through subtly even in the background.

Text Color for Dark Mode

Use off-white for primary text on dark backgrounds, not pure white. A value around #E2E2E6 to #EEEEEE provides excellent readability without the halation effect of #FFFFFF. For secondary text (labels, captions, metadata), drop to around #9898A8 to #AAAABC. For disabled or placeholder text, use #666680 or similar — enough to be perceivable but clearly de-emphasized.

Always verify that your text colors meet WCAG contrast ratios against each surface level, not just the base background. Text that passes contrast on your darkest surface might fail on a lighter elevated surface like a modal.

Adjusting Brand Colors for Dark Mode

Your brand colors likely need adjustment for dark mode. The key principle is to reduce saturation and increase lightness for colors that will appear on dark backgrounds. A vibrant #2563EB blue on white looks great, but on #121218 it feels electric and harsh. Shifting to #6B93F5 — same hue, lower saturation, higher lightness — maintains the brand association while feeling comfortable on dark surfaces.

For semantic colors (success green, error red, warning amber), apply the same adjustment. Dark mode greens should be lighter and less saturated than their light mode counterparts. The goal is that semantic colors are clearly distinguishable from each other and from the background without causing visual strain.

Implementing Theme Switching

CSS custom properties make theme switching straightforward. Define your color tokens as variables, then override them for dark mode using the prefers-color-scheme media query or a class toggle.

:root {
  --bg: #FFFFFF;
  --surface: #F3F4F6;
  --text: #111827;
  --text-secondary: #6B7280;
  --primary: #2563EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121218;
    --surface: #1E1E2E;
    --text: #E2E2E6;
    --text-secondary: #9898A8;
    --primary: #6B93F5;
  }
}

For a manual toggle that overrides system preference, add a class-based override. Store the user's preference in localStorage so it persists across visits. Check for the stored preference on page load and apply the class before the first paint to prevent a flash of the wrong theme.

Images and Media in Dark Mode

Images designed for light backgrounds can feel blindingly bright in dark mode. Consider reducing image brightness and contrast slightly for dark mode using CSS filters: filter: brightness(.85) contrast(1.05) on images within dark mode contexts. For decorative illustrations and icons, provide separate dark mode variants where possible — swapping dark outlines for light ones and adjusting fill colors to suit dark backgrounds.

Avoid images with solid white backgrounds embedded in dark layouts. They create a harsh white rectangle that breaks the visual flow. Use images with transparent backgrounds, or add a subtle border-radius and background-blend to soften the edges.

Testing Your Dark Mode

Test your dark mode in these conditions: on an OLED phone screen (where blacks are truly black and the halation effect is most visible), on a laptop screen in a dimly lit room (the primary use case for dark mode), and in bright daylight (where low-contrast dark themes become unreadable). Check that all interactive elements — buttons, links, form fields, toggles — are clearly visible and distinguishable in dark mode. Verify that focus indicators remain visible for keyboard navigation.

Dark mode isn't a nice-to-have feature you bolt on after launch. It's a parallel design system that deserves the same thoughtfulness and testing as your light theme. Get it right, and you'll delight the growing majority of users who prefer working in the dark.