Dark mode email preview

Three behaviors, not one dark mode

On a website, you decide what dark mode looks like. In email, the reading program decides for you, and each family of programs has its own way of going about it.

So one message has four looks, the light original plus these three. The page shows all four at desktop or phone width.

How the previews are produced

The tool rewrites every color it finds in your HTML, whether it sits in an inline style attribute, in a <style> block or in an old attribute such as bgcolor. Each color is converted to hue, saturation and lightness. The hue stays and the lightness changes.

• Partial inversion: a background with a relative luminance above 0.35 becomes dark. Text and borders in the darker half of the scale become light. Everything else is left as it is.
• Full inversion: lightness is mirrored for every color, so white becomes near-black and black becomes near-white.
• No change: nothing is rewritten. If the message declares color-scheme with dark, its @media (prefers-color-scheme: dark) rules are switched on. A message that sets no colors at all gets the app’s default dark canvas.

Rules written for Outlook.com with the [data-ogsc] and [data-ogsb] selectors are applied in the partial preview. Each preview runs in a sandboxed frame where scripts can’t execute.

What the findings mean

Not enough contrast

In each version, the tool pairs every piece of visible text with the nearest background behind it and computes the contrast ratio. Pairs under 4.5:1 are listed, worst first. Under 3:1 the mode is marked as an error. Hidden preheader text is skipped.

Medium gray text

A gray with little saturation and a lightness between 45 and 70 percent sits in the middle of the scale. Invert it and you get almost the same gray, only now on the opposite background. Use #555555 or darker for secondary text.

Dark logo on a transparent background

The tool loads up to 15 images and inspects their pixels. When most opaque pixels are very dark and the edges are transparent, the logo is going to melt into a dark background. An image on an opaque white background gets reported too, because it will show as a white box.

Transparency to check

The image’s server didn’t allow another site to read its pixels. You’ll have to look at the dark previews yourself.

Dark mode settings

Says whether the message declares support for dark mode and whether it supplies dark colors. Declaring support without supplying colors is worse than declaring nothing.

Images and text

A message with under 120 characters of real text is mostly pictures, and text inside pictures never adapts. Missing alt attributes are counted.

Fixes that survive every app

Start with the choices that need no code. Use strong pairs, meaning very dark text on very light backgrounds or the reverse, since mid-tones are what inversion ruins. Give a dark logo a white outline two or three pixels thick, or place it on a white rounded shape inside the image file. Keep words as HTML text.

For a newsletter, you can then add your own dark styles for the apps that honor them:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

A signature doesn’t get that option. The editor where you paste it strips out <meta> and <style>, which leaves you with clear colors and a logo that works on both backgrounds. Our email signature builder can send its result straight to this page.