Dark mode has gone from "nice to have" to table stakes. Users expect it. Operating systems support it natively. But designing a great dark mode is harder than just inverting colors — there are traps everywhere.

Let's break down the best practices for designing dark mode interfaces that look great, feel good to use, and pass accessibility standards.

1. Don't Use Pure Black

This is the #1 mistake people make when designing dark mode. Pure black (#000000) backgrounds cause a few problems:

Instead, use a dark gray background. Most design systems use something in the #0F172A to #1A1A1A range.

❌ Bad: #000000 pure black background
✅ Good: #0F172A (slate-900) or #18181B (zinc-900)

Here's a good starting point for dark mode surfaces:

#0F172A
#1E293B
#334155
#475569
#64748B

2. Reduce Saturation in Dark Mode

Colors appear more vivid on dark backgrounds. A blue that looks great on white might feel blinding or garish on dark gray.

Best practice: desaturate your accent colors by 10-30% for dark mode. Or shift them toward the lighter end of the spectrum (the 200-400 range instead of 500-700).

Material Design recommends using the 200 weight of your primary color for dark mode instead of the 500 you use in light mode.

3. Rethink Elevation

In light mode, you create depth with shadows. In dark mode, shadows barely register — you need a different approach.

Dark mode elevation works by lightening the background. A card sits above the page background, so it should be slightly lighter. A modal sits above everything, so it's lighter still.

A typical dark mode elevation scale:

Some design systems add a subtle colored tint to elevated surfaces (a hint of blue or purple) to make the elevation feel more intentional.

4. Pay Attention to Text Contrast

Dark mode text contrast is trickier than it seems. Here's what you need to know:

Don't use pure white text

Pure white (#FFFFFF) on dark backgrounds creates halation — the text appears to glow and bleed into the background. Use off-white instead: #F8FAFC or #E2E8F0.

Create a text hierarchy

You need multiple text shades, just like in light mode:

💡 Always test with a contrast checker. Dark mode contrast can be deceptive. What "feels" readable might fail WCAG AA. Use our Contrast Checker to verify.

5. Watch Out for "Vibrating" Colors

Certain color combinations in dark mode produce a vibrating, uncomfortable effect — especially saturated warm colors (red, orange, yellow) on dark backgrounds. The colors appear to flicker or buzz.

Fix it by:

6. Borders & Dividers

Dark mode borders should be subtle — but not invisible. Common mistake: borders that are too dark and disappear, or too light and look like fence posts.

A good rule: your default border should be just barely visible. If you can see it from across the room, it's too strong. Aim for something like #334155 on a #0F172A background.

For dividers between items, use even subtler borders — or skip borders entirely and use background color changes instead.

7. Images in Dark Mode

Images don't automatically work in dark mode. A bright photo on a dark background can be jarring. Options:

8. Icons & Illustrations

Icons need the same treatment as text — make sure they have enough contrast but aren't harsh. Use the same color hierarchy you use for text (primary, secondary, muted).

For illustrations, consider swapping to darker versions. Many illustration libraries now provide both light and dark variants.

9. System Color Scheme Support

On the web, use prefers-color-scheme to automatically match the user's system preference:

@media (prefers-color-scheme: dark) { /* dark mode styles */ }

But always provide a manual toggle too. Some users prefer light mode at night or dark mode during the day. Don't force it.

10. Test on Real Devices

Dark mode looks different on every screen. OLED screens have deeper blacks and more vibrant colors. LCD screens wash out dark grays. Cheap laptop screens make everything look muddy.

Test your dark mode on:

Common Dark Mode Mistakes

❌ Inverting everything

Light mode white = dark mode black. Light mode gray = dark mode lighter gray. That's not how it works. Dark mode has its own logic — you need to rethink the whole system.

❌ Too much pure white

Pure white text causes halation. Use #F1F5F9 or #F8FAFC instead. Reserve pure white for tiny elements that need maximum contrast.

❌ No depth

If everything is the same shade of gray, the interface feels flat. Use lighter backgrounds for elevated elements.

❌ Oversaturated accents

Colors pop more on dark backgrounds. Tone them down. Your 500-weight primary in light mode should probably be a 300 or 400 in dark mode.

❌ Ignoring focus states

Focus rings are easy to see on white. On dark backgrounds? They disappear. Make focus states visible — use a bright ring or a glow effect.

Dark Mode Color System Template

Here's a complete dark mode color system to get you started, built on Tailwind's slate palette:

Build your own system with our Color Converter and Palette Generator — both support dark mode preview.

Final Thought

Great dark mode design isn't about "turning off the lights." It's about creating a whole new visual system that respects how human vision works in low-light environments. Take the time to do it right — your users will thank you.