Email clients like Gmail, iOS Mail, and Outlook think they’re being clever by forcing dark mode. If they see pure black and pure white, they’ll flip your colours. The result? Designs that look nothing like what you were trying to send.
A simple fix
Don’t give them pure extremes.
- Use
#fffffeinstead of#ffffff - Use
#000001instead of#000000
It looks the same, but sneaks past the inversion check for most clients.
Stopping Gmail specifically
Gmail is the worst offender. You can wrap your content in two blend layers that cancel out its overrides:
<div style="background:#000001;mix-blend-mode:screen">
<div style="background:#000001;mix-blend-mode:difference">
<!-- your content -->
</div>
</div>This combo makes Gmail leave your colours alone.
Apple Mail fix
Add this line to stop iOS Mail from “helpfully” reformatting your message:
<meta name="x-apple-disable-message-reformatting" />Be redundant on purpose
Set your colours everywhere, body, table, wrappers, and throw in a same-colour gradient as a decoy. It looks invisible but helps stop some overrides.
<body bgcolor="#000001"
style="background-color:#000001;
background-image:linear-gradient(#000001,#000001);
color:#fff;">
<table role="presentation" width="100%"
style="background-color:#000001;
background-image:linear-gradient(#000001,#000001);
color:#fffffe;">
<tr>
<td>
<div style="color:#fff;">Content here</div>
</td>
</tr>
</table>
</body>Things to keep in mind
- Images: avoid pure black/white edges, tint them slightly.
- Buttons: use near-white fills and near-black text.
- Test across Gmail, Apple Mail, Outlook, and mobile clients.
