What is dark mode in email?

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

Open your inbox in Gmail or Apple Mail on a phone set to dark mode and you'll notice some emails flip automatically to dark backgrounds with light text. Others stay bright white against a dark interface. Some look completely broken, with invisible text or logo images that have sprouted white halos around them. That's dark mode in email: OS-level and client-level color schemes that your subscribers can't opt out of, and that you have only partial control over.

Email clients handle dark mode in one of three ways. The first is full color inversion, where the client automatically flips background colors to dark and text colors to light. This works decently for simple text emails but can make designed templates look unintended. The second is partial adaptation, where the client inverts some elements (usually the background) while leaving others like images alone. The third is no adaptation at all: some clients just render your email as-is and let the operating system apply its own overlay. Outlook on Windows applies its own partial inversion logic, which means a design that looks fine in other clients can look different in Outlook's dark mode. Email client rendering differences are nowhere more visible than in dark mode behavior.

The most impactful thing you can do for dark mode is use transparent PNGs for your logo and any images with backgrounds. A JPG logo saved on a white rectangle will show that white rectangle as a halo in dark mode. A PNG with a transparent background adapts to whatever the client puts behind it. Beyond images, you can add dark mode-specific CSS using the prefers-color-scheme: dark media query to set explicit colors for dark environments. This lets you say "in dark mode, use this background color and this text color" rather than leaving it to the client to guess. Email design best practices now treat transparent PNGs as a baseline requirement, not an optional refinement.

But Not every email needs a full dark mode implementation. If your emails are mostly text with a light background and no strong branding elements, the default client behavior will usually handle them reasonably well. If you're sending heavily designed templates with custom colors, gradient backgrounds, or logo images, it's worth investing in the media query styling and testing it properly. Testing across clients in dark mode is the only reliable way to know what your subscribers are seeing, since the behavior varies enough by client that you can't predict it from first principles. Send yourself a test email and check it in dark mode on iOS, Android, and desktop Apple Mail to get a representative picture of what your audience experiences.

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

Fix my emails for dark mode

I just read about dark mode in email on the Email Almanac. Help me apply this to my situation. I need to: - Check whether my current email templates have dark mode issues - Identify which images need to be converted to transparent PNGs - Decide whether to add prefers-color-scheme media query CSS - Figure out how my email looks in dark mode across key clients - Prioritize which templates to fix first My details (fill in what applies): - Email platform: ... - Template type: [heavily designed with custom colors / mostly text / branded header plus body text] - Known dark mode issues so far: visible / suspected / unknown - Primary audience device: mostly iOS / mostly desktop / mixed

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