Dark mode email design: how to build email that holds up when inboxes flip the colors

There is no single dark mode. Each email client decides on its own how to repaint your message, and they disagree.

Apple Mail and iOS Mail are the well-behaved ones. They read the color-scheme and supported-color-schemes meta tags, and they let you write a @media (prefers-color-scheme: dark) block to swap specific colors. If you opt in with color-scheme: light dark, they mostly leave your palette alone and only nudge the extremes.

The Gmail app on iOS and Android partially respects the same signals. Gmail on desktop web does its own thing and has historically rewritten your styles using data-ogsc and data-ogsb attribute selectors instead of standard media queries.

Outlook is where most emails fall apart. Outlook on Windows uses the Word rendering engine, ignores @media entirely, and does not invert anything, so a light email just stays light inside a dark app frame. Outlook.com and the new Outlook do the opposite: they force a partial color inversion you cannot fully control, often flipping your backgrounds while leaving image-based text untouched.

The takeaway is not to chase every client. It is to design something that reads correctly whether the colors get inverted, partially inverted, or left alone.

This is the single biggest cause of broken dark mode emails. When a headline or a coupon code is baked into an image, the client cannot recolor it. So when the background around it flips to dark, the image keeps its original light background or its dark text, and you get a bright rectangle floating in a dark email or dark text sitting on a dark inverted panel.

Live HTML text avoids this. The client recolors it along with everything else, so a black headline on white becomes a light headline on dark and stays readable. Live text also shows up when a subscriber has images turned off, which a lot of Outlook and corporate setups do by default.

The rule is simple. Anything a reader must read to act on the email, the headline, the offer, the CTA label, the discount code, should be live text, not pixels. Keep images for photography, product shots, and decoration. If you absolutely must put text in an image, give that image a transparent or color-matched background and supply a dark-mode swap where the client supports it, but treat that as the exception.

A logo is the most common casualty. Brands export a logo as a transparent PNG with dark or black artwork, because it looks clean on a white email. Flip the background to dark and that black logo disappears into the background. You are left with empty space at the top of the email.

There are a few reliable fixes. The most bulletproof is to put the logo on a small padded plate of solid color that you control, a light rounded rectangle or a brand-color band, so the logo always sits on a known background no matter what the client does to the area around it. Because that plate is a real background color on a table cell, most clients leave it alone or invert the whole block together, and the logo stays legible either way.

A second option is a logo with a light or white version of the mark, or one with a thin outline, so it reads on both light and dark. Where the client supports dark-mode media queries, Apple Mail and the Gmail app, you can swap to a light logo with a @media (prefers-color-scheme: dark) rule. Just do not rely on that swap alone, because Outlook will never run it. Design the default so it survives even when no swap fires.

Start by opting in. Add the color-scheme and supported-color-schemes meta tags in the head, and set color-scheme: light dark on the root. This tells Apple Mail and Gmail you have handled dark mode and reduces the aggressive forced inversion some clients apply when you say nothing.

Watch your near-white and near-black values. Pure white backgrounds and pure black text are the values clients are most eager to flip, and they flip them unevenly. A border can fix a lot. If you give a white content card a one-pixel border in a mid-tone color, the card edge stays visible even after a client darkens the fill, so your layout does not dissolve into one flat block.

Avoid leaning on background colors you set with CSS shorthand that some clients strip. Set background colors on table cells with the bgcolor attribute as well as inline CSS, so the color holds when one of the two gets removed.

For the logo plate and any other element that must keep its exact color, a known trick is to wrap it so the client treats it as deliberate rather than something to invert. The honest version of the advice: pick a design where the inverted result still looks intentional, then test it, rather than trying to lock every pixel against a client that has decided to repaint your email.

You cannot eyeball dark mode from your design tool, because the breakage happens at render time inside specific clients. You have to look at the real thing.

The fastest manual check is to send yourself a test and open it on a phone with the system set to dark mode, in both Apple Mail and the Gmail app, then open it in Outlook.com and, if you can, Outlook on Windows. Those four cover the behaviors that matter: full inversion handled by media query, partial inversion you cannot control, and a client that does not invert at all. If your email reads correctly in all four, it will read correctly almost everywhere.

For broader coverage, a rendering tool like Litmus or Email on Acid will show dark-mode variants across many clients in one screen, which is worth it for agencies sending at volume. Whatever you use, check three things specifically: did the logo survive, is every word still legible against its new background, and did any white card or section collapse into the background and lose its edges.

Mailwright builds its output as table-based, inline-CSS HTML with the dark-mode meta tags set and live text by default, so the email holds up across Gmail, Apple Mail, and Outlook before you ever paste it into Klaviyo. The guidance above still matters when you hand-edit, because dark mode is the place a small change quietly breaks a send.