Free tool
Your email in dark mode
Many people read their email in dark mode, and each email program recolours messages its own way. Paste your signature or newsletter: see what your readers see.
Where to find the HTML? Mailchimp, Brevo, Constant Contact and others have an “Export as HTML” or “View code” option. For a signature, use “Copy the HTML code” in our signature generator. In Gmail, “Show original” on a received message shows its code too.
Signature received from the generator.
Your code stays in your browser: it is sent to no server. The previews are isolated and run no scripts; only images are loaded from their address, as in an email program.
As designed.
Apple Mail, Outlook for Mac, Gmail on the web: the message keeps its colours, unless it provides its own dark mode.
Outlook.com, Outlook and Gmail for Android, Outlook for iPhone: light backgrounds darkened, dark text lightened; the rest stays.
Gmail for iPhone, classic Outlook for Windows: every colour is inverted, dark backgrounds turn light.
What we spotted
A simulation: each program has its own rules, which change with its updates. Always check with a real send.
Three ways of darkening an email
No change
The message decides
Apple Mail and Outlook for Mac leave the message as is, unless it declares color-scheme and provides its own dark styles with @media (prefers-color-scheme: dark). Gmail on the web generally leaves messages untouched.
The only case where you control the result.
Partial inversion
Only what is light
Light backgrounds become dark and dark text becomes light. Colours that are already dark (a navy button, for example) stay put.
Outlook.com, Outlook and Gmail on Android, Outlook on iPhone.
Full inversion
Everything flips
Every background and every text colour is inverted, dark ones included: a navy banner becomes pale blue. Images are left alone.
Gmail on iPhone, classic Outlook for Windows.
How this simulation works
Your HTML is read by your browser, then rewritten four times. Colours in style attributes, in bgcolor and color attributes and in <style> tags are recalculated from their lightness: a light background is darkened while keeping its hue, a dark text is lightened. We do not simply apply a CSS filter, because a filter would also invert images, which real email programs never do. For the “No change” preview, the dark rules of your message (prefers-color-scheme: dark) are switched on if it declares them.
The contrast check reads colours written on the elements themselves (inline styles and attributes), which is how most newsletters are built. Colours coming only from classes in a <style> tag are shown in the previews but not measured.
It is a simulation: email programs don't publish their exact rules and adjust them over time. Use it to spot problems, then confirm by sending yourself a test.
Frequent fixes
Logo
Give it an outline or a background
A dark logo on a transparent background disappears on a dark background. Add a thin white outline (2 to 3 pixels) around the shapes, or put the logo on a white rounded rectangle within the image itself.
A white background baked into the image always shows, even in dark mode.
Text
Avoid medium grey
Medium grey (#888, #999) stays medium grey once inverted: barely readable on white, barely readable on black. Use a darker grey (#555 or darker) in light mode.
Same for thin coloured text.
Code
Declare your dark mode
In a newsletter, add <meta name="color-scheme" content="light dark"> and a @media (prefers-color-scheme: dark) block with your own colours. Apple Mail will use them.
Not possible in a signature: the email program strips these tags.
