Dark Mode in Email: Three Client Behaviours and What to Do About Them

More than a quarter of emails are now opened in dark mode, and email clients handle it in three different ways: leaving colours alone, inverting partially, or inverting completely. You can influence this with two meta tags and a media query, but they do not work everywhere. Below is what each client actually does and which code gives you the most control.

How widespread this is

Dark mode has stopped being a niche setting. Litmus data puts dark mode above a quarter of all opens, and the growth comes from mobile, where the theme often follows the system setting by default.

A different figure matters more, and almost nobody quotes it. Opens in dark mode are markedly more likely to be instantaneous: the email is opened and immediately closed. The gap is too large to be chance, and the explanation is simple — an email broken by inversion is unreadable, so it gets closed.

Another telling fact from the same research: only 11% of marketers always account for dark mode when building emails, though many more test for it. The problem is visible but unsolved, because the solution is not obvious.

Three client behaviours

It is not obvious because there is no single behaviour. Clients fall into three groups, and the same email looks different in each.

• leave colours alone — the email renders as coded, only the surrounding interface goes dark
• partial inversion — light backgrounds go dark and dark text goes light, but brand colours survive
• full inversion — every colour flips, including the ones you set deliberately

Full inversion is the treacherous one. If you built the email dark on purpose, such a client will flip it to light and produce exactly the opposite of your intent.

The code that takes control

First and most important: two meta tags in the head. They tell the client you have considered both schemes, and that alone stops forced inversion in a number of clients.

Next comes a media query with your own dark colours. It is understood by Apple Mail, iOS Mail, Outlook 2019 and newer, Thunderbird and Samsung Mail — a substantial share of the audience.

Note the two approaches in the example: background and text colours are overridden, while the logo has two prepared versions, one of which is hidden. That is more reliable than hoping inversion treats it kindly.

What breaks most often

• a dark logo on a transparent background becomes invisible
• light grey text on white turns into dark grey on dark after inversion and loses contrast
• images with white backgrounds leave bright rectangles in the middle of a dark email
• buttons with a light fill merge into the background after the flip
• thin dividers and borders disappear entirely
• an email built dark on purpose is flipped to light under full inversion

The logo: the main headache

The logo is the most frequent problem, and in marketer surveys images are named the hardest part of preparing for dark mode.

There are three workable solutions, and the choice depends on how much brand precision matters. First, a logo with a white outline or plate: works everywhere but looks like a compromise. Second, two logo versions, light and dark, switched by media query: elegant but not universal. Third, a logo in colours that read on any background — usually a decision at brand book level.

How to test

Do not test in one place. The minimum set is Apple Mail on a phone, the Gmail app on a phone and Outlook on a desktop: between them they cover all three behaviours.

• send yourself a test and open it on a phone with dark mode enabled
• switch the system theme without closing the email — some clients repaint it immediately
• check the logo, the buttons and any images with white backgrounds separately
• confirm the text is readable: contrast matters more than colour accuracy

How this works in Mailvex

Mailvex supports dark mode at the email level: background, text and block colours are set separately for light and dark, and the meta tags are added to the head automatically at compile time.

You can supply two logo versions and the swap happens by itself. The preview toggles between schemes inside the editor, so problems appear before sending rather than after.

Frequently asked questions

Do I need a separate email for dark mode?

No. A separate email would require knowing the recipient theme in advance, and that information is not available to a sender. The correct approach is one email with a media query that the client applies when needed.

Why does an email look fine in one inbox and broken in another?

Because clients apply different inversion models, and they do so after delivery. A sender does not control which model a client chooses; they can only declare a preference and prepare a fallback.

Are the meta tags enough on their own?

They solve the main problem — forced full inversion in some clients. But defining specific dark colours requires a media query. Meta tags without one give you predictability, not control.