How do I design emails for dark mode?

Still have a question, spotted an error, or have a better explanation or a source we should cite?

You're sending an email that looks great on your screen, but your recipient opens it in dark mode and your white background turns black. That's the dark mode challenge. Different email clients handle color inversion differently, so you can't just hope for the best.

But Here's what actually works. Use transparent PNGs for logos and icons so backgrounds show through instead of inverting. Avoid pure white backgrounds (they'll flip to near-black in dark mode). Design so your email looks acceptable in both light and dark. If the client supports it, add a prefers-color-scheme media query to customize colors for dark mode specifically.

Testing is non-negotiable. Litmus and Email on Acid both let you preview how your design renders across clients in light and dark modes. You'll catch problems before they hit inboxes. Check how different clients like Apple Mail, Gmail, and Outlook handle dark mode so you're not designing blind. Then test your design across multiple clients before you send.

Contributors

Who worked on this answer

Every name links to their profile. Every company links to their site. Real people, real accountability.

Ask an AI · tailored to your setup

Get help designing for dark mode

I'm designing an email and want it to work in both light and dark modes. What should I do with colors, images, and testing?

Edit the yellow boxes, then send to the AI of your choice.