Dark mode is everywhere — from terminals to to-do lists to entire OS themes. And while it’s often praised for being easier on the eyes, designing for dark mode isn’t just about flipping black and white.
The colors, contrast, and especially the images you use can make or break the experience. Here’s what I’ve learned while building dark-mode-friendly dashboards and websites, especially when it comes to visuals that don’t clash with the overall vibe.
1. Avoid Harsh Contrast in Images
Bright white backgrounds or oversaturated visuals can feel jarring in a dark UI. One workaround I’ve used is adding a slightly muted or earthy tone, like a brown background, to balance images without losing warmth or contrast.
For a recent side project, I needed to replace the background of some product images to make them match a dark-themed landing page. I used this background remover to remove the original clutter and drop in a subtle brown background that blended nicely. Much better than trying to mask edges manually.
2. Stick to Soft Neutrals and Deep Accents
Dark mode doesn’t mean everything should be pitch black. Deep greys, charcoal, navy, and muted browns can give your interface depth and character. Just be cautious with bright accent colors — they can feel neon-ish against a dark base.
Pro tip: in Tailwind or CSS, set bg-neutral-800 or #2d2d2d instead of straight black. It feels more intentional.
3. Use SVGs or Transparent PNGs
To make icons and UI illustrations feel consistent in both light and dark themes, stick with SVGs or transparent PNGs. They scale better and don’t create awkward white boxes in dark UIs.
Bonus: they’re easier to theme dynamically if you’re using something like Tailwind, Styled Components, or CSS variables.
4. Test With Real Content
Mockups look great in isolation — but throw in real user-generated content, and things can get weird. Always test your dark mode design with real images, avatars, and text to make sure contrast and clarity hold up.
Final Thoughts
Dark mode design isn’t just an aesthetic choice — it’s a usability upgrade for many users. But making it look good takes more than swapping colors. With small adjustments like softening contrast, using neutral tones like a brown background, and testing real content, you can make sure your dark-themed app or site feels just as polished as its light-mode sibling.
If you’ve run into your own dark mode design headaches (or found clever fixes), I’d love to hear how you handled them.