Dark mode in email: how it works and how Quanda handles it

Dark mode in email is a display mode in which an email program shows a dark background and light text. Some programs leave your email untouched, some recolour it their own way and some, such as classic Outlook for Windows, flip all the colours regardless of your code. This guide shows exactly what each email client does on desktop, on the web and on mobile, how the Quanda email editor handles it and what you can do yourself.

Key takeaways

1. According to Litmus, more than a quarter of users use dark mode, and tracked opens in 2022 averaged 35%.
2. Programs fall into three groups: no change, partial inversion and full inversion.
3. Every time it exports an email, the Quanda email editor adds rules that lock your editor colours. You set nothing up.
4. We verified the lock in Apple Mail on Mac. On the Outlook.com website it did not work in our test, and classic Outlook for Windows and the Gmail app ignore it.
5. Images do not change, so the biggest risks are a logo with a transparent background and a photo with a white background.
6. The preview in the editor does not show dark mode. What counts is a test email in real programs.

In short: what, why, where and what to do

• What happens: in dark mode, an email program can change the background, text and button colours in your email.
• Why it matters: unreadable text, a vanished logo and unfamiliar brand colours are what your recipient sees, not you.
• What Quanda handles: it looks after your editor colours by itself, wherever the program allows it.
• What is left to you: images, contrast and a test email to the programs your recipients use.

What is dark mode in email

Dark mode is a way of displaying content in which a device or app uses dark surfaces and light text. In email it is more complicated than on the web, because the look is decided not only by the author but also by the mail program, known as the email client.

An email client is the program or website where a recipient reads their mail, such as Apple Mail, Gmail or Outlook. When the recipient turns on dark mode, the client decides what to do with the incoming email. It can leave it alone or overwrite its colours, regardless of what you set in the editor.

Dark mode is always switched on by the recipient, never the sender. Usually it happens through the phone or computer settings. The Gmail app on Android also has its own theme option, while on an iPhone it follows the system setting.

How many people read emails in dark mode

Dark mode is common, but most people do not read in it. The most reliable email figures come from Litmus, which can detect dark mode for a portion of opens.

Percentages from different years and methods cannot be compared as a trend. For practical purposes, one simple conclusion is enough: roughly one in four to one in three recipients may see your email in a dark environment. Blogs also quote figures above 80%, but these usually have no traceable source or describe phone preferences in general, not reading email.

It is also worth knowing that dark mode is not automatically easier to read. In its 2020 review of studies, Nielsen Norman Group says that people with normal vision read dark text on a light background better, and that the difference grows with smaller type. Dark mode, on the other hand, can help some people with cataracts. People therefore tend to choose dark mode for comfort and habit rather than better readability, and that choice is worth respecting.

What also matters is where your recipients read:

Your database may look completely different. With business addresses, Outlook tends to be much stronger. So treat the global figures as a guide.

How email clients change colours: three groups

Email clients change colours in three ways: they leave the email untouched, apply partial inversion or apply full inversion. This grouping comes from Litmus.

No change. The client darkens only its own window and shows the email in its original colours. This group includes Gmail on the web, Yahoo Mail, AOL and Apple Mail, provided the email has colours set.

Partial inversion. Inversion means flipping colours, so light becomes dark and the other way round. Partial inversion darkens only light backgrounds and lightens dark text, leaving dark areas alone. Outlook.com, the Outlook mobile app, Gmail for Android and Office 365 on Mac behave this way.

Full inversion. The client flips the whole colour scheme including dark areas, so even your brand colour can change. Outlook 2021 and Office 365 for Windows, the Windows Mail app and Gmail for iOS behave this way.

Dark mode support in email clients: an overview

Dark mode support varies widely between clients: Apple Mail responds to code, classic Outlook for Windows does not, Gmail only to a limited extent, and for Outlook the tests and the available data disagree. The tables show for each client what it does with an email in dark mode, whether it responds to code and what Quanda does about it. The Under control column tells you whether your editor colours stay put in that client according to the available data.

Client behaviour is based on Litmus's table from February 2025, and code response on the Can I email database. We verified the Quanda export on an email from the editor on 30 October 2026. On the Outlook.com website, in our test from the same day, the colours were inverted and the lock did not work, even though Can I email lists these rules as supported. Clients keep changing, so treat this as a starting point, not a guarantee.

How we tested: on the Outlook.com website in dark mode, in a personal @outlook.com mailbox, first with hand-written HTML using the same rule syntax as the export and then with a real email from the editor. The [data-ogsb], [data-ogsc] and @media (prefers-color-scheme: dark) rules did not apply, while an ordinary class rule with !important did. We did not test the Outlook mobile apps, Outlook on the web in Microsoft 365 business accounts or new Outlook for Windows.

Desktop email clients

Webmail clients

Mobile email apps

Watch out for the Gmail change: at the turn of August and September 2026, Google marked an old request as resolved, and according to the Email Markup Consortium and Dyspatch tests the Gmail apps now respect the tag <meta name="color-scheme" content="light only">. There is no official Google documentation yet, and according to available tests it applies only to Google accounts, not to third-party mailboxes in the Gmail app. Can I email confirms partial support in a test from September 2026.

How the Quanda email editor handles dark mode

The Quanda email editor does not recolour your email for dark mode. Instead it tries to lock your light design. A colour lock is a set of rules in the HTML that instruct dark mode clients to use exactly the colours you chose. This happens on every export and there is nothing to set up. The colour lock is available on all plans.

The editor deliberately does not create a dark version. You can use any colours in it, so the right dark palette cannot be determined in advance. Automatic darkening would also put your brand colours and images with white backgrounds at risk. Predictability came first: your email should look the way you designed it.

What the editor does on export

1. Declares dark mode support. It adds the color-scheme and supported-color-schemes tags to the head with the value light dark.
2. Marks coloured elements. Every element with a background or text colour gets a class derived from the colour, for example qe-dm-bg-f1f1f1.
3. Generates rules. Every colour used gets a rule with !important, once in @media (prefers-color-scheme: dark) and once for Outlook through [data-ogsb] and [data-ogsc].
4. Adds the bgcolor attribute. The <body> and the main table also carry the background as an HTML attribute, because Outlook requires it.
5. Takes care of buttons. Cells with bgcolor get a background written as rgba(), which Gmail for Android does not invert. On Outlook.com it serves the same purpose, but we have not verified the effect.
6. Leaves Outlook blocks unchanged. Conditional comments and VML, the older Outlook graphics language, stay as they are.

A shortened example of the editor output:

:root { color-scheme: light dark; supported-color-schemes: light dark; }

@media (prefers-color-scheme: dark) {
  .qe-dm-bg-f1f1f1 { background-color: #f1f1f1 !important; }
  .qe-dm-bg-ffffff { background-color: #fffffe !important; }
  .qe-dm-fg-000000 { color: #010101 !important; }
}

[data-ogsb] .qe-dm-bg-f1f1f1 { background-color: #f1f1f1 !important; }
[data-ogsb] .qe-dm-bg-ffffff { background-color: #fffffe !important; }
[data-ogsc] .qe-dm-fg-000000 { color: #010101 !important; }

Why white is not white: the #fffffe trick

Apple Mail on Mac and iPhone ignores the background #ffffff inside @media (prefers-color-scheme: dark), while it accepts #fffffe. Issue no. 65 in the email-bugs tracker of email client bugs has described it since 2019 and it is still open. Without a workaround, you could end up with black text on a black background.

So in its dark mode rules the editor writes white as #fffffe and black as #010101. You cannot tell the difference by eye. The original colours stay in the email itself.

What the editor does not handle

• Images. The editor does not change them and cannot swap a light logo for a dark one.
• Preview. The editor has no dark mode preview, so checking requires a test email.
• Colours that are not written in. Only solid colours get locked. An element without its own colour or a transparent element gets no rule.
• Glare. A light email stays light even in a dark environment, so it can feel bright. This is a conscious trade-off.

Where you can influence dark mode and where you cannot

Dark mode is a division of labour between the editor, you and the recipient's program. This table shows who decides what.

The main rule follows from the table: design your email so it holds up after inversion. Where the lock works, that is an extra safeguard. Where it does not, that is your only protection.

How to design an email for dark mode: what is right and what is wrong

The biggest risks do not lie in background colours, as the client usually copes with those. They lie in elements that do not get recoloured, above all images.

Logo: an outline or its own plate

A logo with dark lettering and a transparent background is the most common victim of dark mode. It looks good on white, but vanishes on a darkened background.

You have two reliable solutions. The first is a light outline 1 to 2 pixels thick around the dark shapes. Nobody will see it on a white background, and on a dark one it keeps the logo intact. The second is a plate of its own, meaning the logo is saved with a white or coloured background built in. Both use PNG, the only common format that handles smooth transparency. You will find an overview in the article JPG, PNG or GIF?.

Photos: watch out for white backgrounds

A product photo on a white background turns into a white rectangle in a dark email. You cannot see this in a light design, because it blends into the email background.

Either cut the photo out to a PNG with a transparent background, or use a shot with its own background, for example on a table or in a setting. How to prepare an image properly is described in the article Images in email.

Buttons: solid colour and contrast

The button is the reason you are sending the email, and this is exactly where mistakes cost you. A light button with white text is readable only by chance, and in inversion it can become invisible.

Choose a solid mid tone with a contrast against the text of at least 4.5:1 under the WCAG rules. Never make a button an image unless you have to. A text button can adapt, and it can also be read by someone who has not downloaded images. There is more on choosing colours and contrast in the article Colour psychology in marketing: how to get colours on your side.

Overview of the most common mistakes

Tip: In the editor, use the Settings panel to explicitly set the background colour of the email, body, header and footer as well as the text colour. The lock only works on colours that are actually written in the email.

How to check an email in dark mode

The preview in the editor does not show dark mode, so a real test is what counts. You only need to do it once for each new template.

Step 1: Find out what your recipients read on

Look at which programs dominate your database. Business addresses often mean Outlook, personal addresses mean Gmail, Apple Mail and Yahoo.

Step 2: Set colours explicitly

In the editor, set the background colour of the email, the body and every coloured block, as well as the text colour. The editor only locks colours that are explicitly written in the email.

Step 3: Check your logo and images

Try a logo with a transparent background on a dark surface, add a light outline or its own plate, and replace photos with white backgrounds with cut-out versions.

Step 4: Send yourself a test email

On the Sending Settings page, fill in up to three test addresses and click Send test e-mail(s). The steps are described in the help article Setting up mailing in a simple campaign.

Step 5: Open the email in dark mode

Switch your device to dark mode and open the email at least on an iPhone, in the Gmail app and in Outlook for Windows. That way you will see the email both unchanged and after inversion. If you have recipients on Android, add Gmail there too, because it recolours differently than on an iPhone. If many of your recipients use Outlook, also test Outlook on the web and the Outlook mobile app, because the rules may not work there the way the available tables say.

Step 6: Go through the checklist

Check that the text is readable, the logo is visible, the button's colour and label work, and review the images, the footer and the unsubscribe link.

Pre-send checklist:

• The logo is visible on light and dark backgrounds.
• The text is readable and has enough contrast.
• The button is readable and stands out.
• No photo creates a white rectangle.
• Social media icons are visible.
• The footer and unsubscribe link are readable.
• Important information is in text, not in an image.
• The colours of all blocks are explicitly set in the editor.

Step 7: Fix and test again

Adjust whatever did not pass and send yourself a new test email. You are ready to send the campaign once the email is readable in all the main programs.

Tip: Tools that show previews across clients are helpful, but do not rely on them blindly. Dyspatch reports that after the 2026 change, the Gmail app preview in Litmus still showed forced dark mode, while the email actually delivered behaved differently. A real device has the final word.

Dark mode in HTML code: what your own code can do

Your own HTML code reliably influences dark mode in Apple Mail, but not in classic Outlook for Windows, and on the Outlook.com website the rules did not apply in our test. With an email built from your own code, expect to handle dark mode behaviour yourself, and unlike the editor you can go further and create a true dark version.

The foundation is three things: declaring support in the head, the dark mode rules and their mirror for Outlook. Can I email lists the Outlook mirror as supported, but on the Outlook.com website it did not apply in our test, so always check it with a test email.

<head>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    :root { color-scheme: light dark; }

    @media (prefers-color-scheme: dark) {
      .email-bg { background-color: #1a1a1a !important; }
      .content-bg { background-color: #272623 !important; }
      .body-text { color: #e0e0e0 !important; }
    }

    [data-ogsb] .content-bg { background-color: #272623 !important; }
    [data-ogsc] .body-text { color: #e0e0e0 !important; }
  </style>
</head>

Add the classes to your elements and keep inline colours as the base for clients that do not know the rules. Every coloured section needs its own class, otherwise Apple Mail may recolour it separately, leaving a coloured rectangle in the middle of a dark email.

You can show a dark version in Apple Mail, in Outlook on mobile you need to try it out, and on the Outlook.com website it did not work in our test. Gmail will not read your dark styles.

How to ask Gmail for a light email

If you want the Gmail app to stop recolouring your email for Google accounts, add the tag with the value light only. Apple Mail reads it too, however, and would stop using your dark styles, which is why the CSS goes back to color-scheme: light dark.

<meta name="color-scheme" content="light only">
<style>
  :root { color-scheme: light dark; }
</style>

Keep two things in mind. There is no official Google documentation yet, and the tested behaviour applies only to Google accounts. So before you deploy this, try it in the Gmail app on both iPhone and Android.

What code cannot influence

Classic Outlook for Windows does not read @media (prefers-color-scheme) or data-og* attributes. Tricks exist, but they work only some of the time and Litmus recommends using them sparingly, because they go against the recipient's choice. With Outlook it is better to design the email so it survives inversion. The recipient can also switch the message background in Outlook with the sun and moon button.

If you do not want to write code yourself, the Quanda MCP server can help. An AI assistant writes the HTML email according to the Quanda guide, including dark mode, and creates a campaign draft in Quanda with a test email.

Dark mode in email: summary

Dark mode cannot be turned off or bypassed, only planned for. In the Quanda email editor you have nothing to set up: your editor colours are locked wherever the client allows it, which we verified in Apple Mail on Mac. Where the client decides for itself, as on the Outlook.com website, in classic Outlook for Windows and the Gmail apps, only a design that survives inversion will protect you.

Remember three things: set your colours explicitly, take care of your logo and photos with white backgrounds, and send a test email to real programs.

Want to go deeper? Try the free online course Email Copywriting and Design That Gets Read. And if you are not sure how your email looks in dark mode, get in touch for a free consultation.