Dark mode done right

Dark mode isn’t just a trend anymore — it’s an expected feature. But many implementations still feel off: low contrast, weird color shifts, or broken visuals. Let’s break down how to get dark mode right.

1. Don’t just invert colors

A true dark mode isn’t just your site flipped to black and white. Inverting colors can lead to unreadable text, harsh shadows, or brand colors that no longer work.

Tip: Design your dark palette intentionally. Test how your brand colors look on dark backgrounds and adjust where needed.

2. Keep contrast high — but not harsh

Pure white on pure black can cause eye strain. And low contrast makes text hard to read.

Tip: Use soft shades of white (like #EDEDED) on dark grays (like #121212). Aim for at least 4.5:1 contrast for body text.

3. Use system preferences when possible

People who prefer dark mode usually set it at the OS level. Respect that by detecting and adapting to their settings.

Tip: Use the prefers-color-scheme media query to automatically switch based on user preference.

4. Be consistent with images and illustrations

A dark UI with bright illustrations can look disconnected. Sometimes images with white backgrounds feel out of place.

Tip: Provide alternative assets for dark mode if needed — or use images with transparent backgrounds that adapt well to both modes.

5. Think beyond just colors

Dark mode changes the mood. Shadows, elevation, and surface colors all need tweaking.

Tip: Soften your shadows and rethink depth. What works on light backgrounds might feel too heavy in dark mode.

Final thoughts

Done right, dark mode can make your site feel modern, polished, and easier on the eyes. Take the time to design it with care — not just flip a switch and call it done.