How to design marketing emails that still look right in dark mode

What does dark mode actually do to an email?

Email apps (developers call them email clients) handle dark mode in one of three ways. Some leave your email exactly as designed. Some find the light backgrounds and darken them, adjusting the text to suit, which is called a partial invert. Some recolour almost everything, dark areas included, which is a full invert.

So there is no single dark mode to design for. The same email can look three different ways on three phones. Litmus, the email testing company, keeps a client-by-client breakdown; the list below uses its classifications, plus what we saw ourselves while building a seven-email welcome series for an Australian online jewellery business.

• Apple Mail on Mac, iPhone and iPad: honours a light-only colour scheme if you declare one. In our testing the email stayed fully light.
• Gmail on the web: Litmus reports no change to the email itself, even when Gmail's own theme is dark.
• Gmail app on iPhone: full invert.
• Gmail app on Android: partial invert, so light backgrounds are darkened.
• Outlook.com and the Outlook apps for iPhone and Android: partial invert, but they mark what they change with attributes you can target.
• Outlook on Windows: full invert, according to Litmus, with very little you can target outside Outlook's own VML code.

Can you stop Gmail from using dark mode?

In the Gmail apps, mostly no. Gmail doesn't support the prefers-color-scheme media query that other apps use to detect dark mode, according to caniemail's support tables. Our emails declared a light-only colour scheme in both the meta tag and the CSS. That kept Apple Mail light, and the Gmail app on a phone darkened the email anyway.

We also tried forcing the cream background to stay cream in Gmail. The background held, but Gmail still lightened the text, which left pale text on a pale background. That was worse than doing nothing, and we took it back out.

One development worth watching: caniemail's September 2026 test records partial support in the Gmail iPhone and Android apps for one specific meta tag value, light only, and not the plain light value we had used. We haven't tested it ourselves yet. If you try it, check on real phones, and make sure the email still works if Gmail ignores it.

Let Gmail darken cleanly, and make the brand an image

Instead of fighting the Gmail app, we let it produce a clean dark version and made sure everything that carries the brand survives it. The principle that came out of the project: email apps recolour your HTML, not the pixels inside your images. A navy band that is an image stays navy everywhere. A navy band built from a background colour with text on top can be recoloured, and its text with it.

So the navy bands, badge labels and handwritten script lines in that series were images, and the body copy stayed as live text for Gmail to recolour. Live text is still the right default for paragraphs and short labels: it scales on a phone, screen readers can read it, and it recolours along with everything around it. We only turned text into an image when it had to be in a particular typeface, such as a script font, because web fonts don't load in Gmail or Outlook.com.

How do you pin colours in Apple Mail and Outlook.com?

Where an app gives you a hook, use it, and always pin the background and the text together. If you pin a navy background but not the cream text on it, an app that darkens text will leave you with dark text on navy. Pairing them for each app's mechanism means no app can end up with a mismatched, unreadable combination.

Apple Mail reads the colour-scheme declaration and the prefers-color-scheme media query. Outlook.com and the Outlook mobile apps add data-ogsc (text colour) and data-ogsb (background colour) attributes to the elements they recolour, and you can use those attributes as selectors to put your colours back. For any of this to work, every colour has to be written twice: inline on the element, and as a class the dark-mode rules can reach.

<!-- In the <head> -->
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">

<style>
  :root { color-scheme: light; }

  /* Apps that honour prefers-color-scheme (Apple Mail): restate the light design */
  @media (prefers-color-scheme: dark) {
    .paper  { background-color: #FAF7F2 !important; }
    .band   { background-color: #1F2A44 !important; }
    .c-body { color: #333333 !important; }
    .c-head { color: #1F2A44 !important; }
  }

  /* Outlook.com and Outlook apps: background and text pinned as a pair */
  [data-ogsb].paper  { background-color: #FAF7F2 !important; }
  [data-ogsb].band   { background-color: #1F2A44 !important; }
  [data-ogsc].c-body { color: #333333 !important; }
  [data-ogsc].c-head { color: #1F2A44 !important; }
</style>

<!-- Every colour stated twice: inline, and as a class the rules above can reach -->
<td class="paper c-body" style="background-color:#FAF7F2; color:#333333;">...</td>

How do you stop logos and images disappearing in dark mode?

Images keep their own colours, but transparent areas don't: they show whatever the app has painted behind them. Dark ink on a transparent PNG is the classic casualty. It looks perfect on your light background and vanishes on a dark one. These are the fixes that worked for us.

• Bake a card in. Give any dark-on-transparent image, such as a signature or a handwritten line, an opaque rounded card in your email's background colour. On the light email the card is invisible; when the app goes dark, it keeps the ink readable.
• Outline dark numerals and marks. For a rating badge with a dark numeral, we drew a thick light outline around the figure before filling it. It disappears against the light background and defines the numeral on a dark one. Litmus suggests the same idea: a stroke or glow around a dark logo.
• Draw line icons in a mid-tone. A set of near-black line icons disappeared completely on Gmail's dark background. We re-rendered them with the dark strokes changed to a warm mid-tone gold, and checked that colour against both the light background and a dark one.
• Bake labels into coloured bands. In one footer, Gmail recoloured the pale label text but not the navy band behind it, so the labels turned dark on navy and vanished. Making each badge and its label a single image fixed it for good.
• Give coloured bands a background image. Setting a tiny solid-colour tile as a background image, alongside the background colour, kept our gold strips, buttons and footer bands from being recoloured in the apps we tested. Outlook on Windows ignores CSS background images, so the colour still has to be right on its own.
• Leave light-on-dark images alone. Badges with cream lettering on a painted navy band were already readable on dark, so they didn't need a card. Don't add fixes you don't need.

Dark mode test checklist

Test in the real apps where you can, and work through this list for every email.

• Open the email in the Gmail app with the phone in dark mode, on iPhone and Android if you can. They behave differently.
• Check Apple Mail in dark mode and confirm the light design holds.
• Check Outlook.com in dark mode and confirm every pinned background still has its matching text colour.
• Look for anything that has vanished: signatures, logos, icons, dark text inside images.
• Look for mismatched pairs: dark text on a dark band, or pale text on a pale panel.
• Check buttons. A button made from a coloured cell with live text needs its background and text colour pinned together.
• Check that every image has alt text, so the email still makes sense with images turned off.
• Give the business owner a way to see the dark version. We added a dark toggle to our preview page that imitates the Gmail treatment, so the client could review it without owning a dark-mode phone.

Common questions

Does Gmail on a computer change emails in dark mode?

According to Litmus, Gmail on the web leaves the email content as designed, even when Gmail's own theme is dark. It's the Gmail apps on phones that recolour emails.

Why did my logo disappear in dark mode?

Most likely it's dark artwork on a transparent PNG. The transparent areas show the app's dark background, so the dark artwork has nothing to stand out against. Put the logo on an opaque background in your email's colour, or add a light outline around it.

Do data-ogsc and data-ogsb work in Gmail?

No. Those attributes are added by Outlook.com and the Outlook mobile apps when they recolour an email. Gmail doesn't add them, and it doesn't support the prefers-color-scheme media query either.

Should I design a separate dark version of my email?

Apple Mail would show one, because it supports prefers-color-scheme. We chose to keep the light design pinned there and let Gmail make its own dark version, because the Gmail apps don't read a designed dark version anyway. Put your effort into making images and brand colours survive.