How to fix dark mode in email

From Learn, the They Sent It email marketing encyclopedia · How-to · First edition · Updated November 13, 2026

Some email apps recolor your email in dark mode. These steps keep it looking as designed. You need to edit your template's HTML, or add an HTML block to it. Why each step works: Dark mode.

See the problem

Send a test to a Gmail address. Turn on dark mode on your phone and open it in the Gmail app. Look for split backgrounds, missing icons and hard-to-read text.

Add the light only tag

Put this line in the email's <head>. The Gmail app is then reported to show it as designed for Google accounts.^[1]

<meta name="color-scheme" content="light only">

Can't edit the head? Put it in an HTML block at the top of the email, such as a reusable header. That worked in our one-iPhone test.^[3]

Use exactly light only. Plain light does nothing in Gmail. Skip this step if your email looks fine in dark mode: the tag turns dark mode off for readers who chose it. If your template has its own dark styles, also add :root { color-scheme: light dark; } so Apple Mail on the Mac keeps them.^[1]

Protect colored backgrounds

For apps that ignore the tag, set each colored background twice: as a color and as a one-color gradient. In our one-iPhone Gmail test without the tag, the background kept its color. Untested in Outlook.^[3]

<td style="background-color:#f4d03f;
           background-image:linear-gradient(#f4d03f,#f4d03f);">

Text on that background can still flip color. Keep text on plain white or dark backgrounds where you can.

Restore colors in Outlook

Outlook.com marks the elements it recolors. Put the block inside a wrapper with a white background, which Outlook recolors and marks. Then restore the colors with these rules in your <style>.^[2]

[data-ogsb] .band { background-color:#f4d03f !important; }
[data-ogsc] .band-text { color:#222222 !important; }

Shown for Outlook.com. It does not work in classic Outlook for Windows.

Fix logos and icons

Save logos and icons with a solid background baked in, matching the area behind them.
Or add a thin light outline, so a dark logo still shows on a dark screen.
Keep each illustration in one image. Two halves side by side can drift apart on phones.

Check again

Resend the test. Check the Gmail app, the Outlook app and Apple Mail, each in dark mode. Our study of 73,545 brands found only 0.8% of brands use the light only tag.

References

First edition, November 13, 2026, by Conner Baker. Found an error? Tell us.