I’m constructing a transactional HTML e-mail (not advertising) the place model coloration constancy is crucial.
The e-mail is generated server-side (Node.js) and makes use of a strictly table-based format for max compatibility.
The corporate’s main model colours are yellow and blue, and preserving these actual colours is obligatory.
The issue
When the e-mail is considered in darkish mode, some colours are nonetheless mechanically inverted or overridden by the e-mail consumer:
-
Gmail (iOS and Android) — most frequent
-
iOS Mail — intermittent
-
Gmail Internet — sometimes
In mild mode, the e-mail renders precisely as meant.
This habits seems client-driven, not attributable to lacking CSS assist.
What I’ve already applied
I’ve deliberately applied each presently documented mitigation:
Structure
-
Desk-only format (no div, flex, or grid)
-
Fastened 600px container with
max-width:100% -
No exterior CSS
-
No background pictures for brand-critical areas
Coloration safety
-
Inline kinds on each component
-
bgcolorattributes on all<desk>and<td>components -
Specific triple declarations (
bgcolor,background-color,coloration) -
No shorthand CSS
Darkish mode dealing with
-
<meta identify="color-scheme" content material="mild darkish"> -
<meta identify="supported-color-schemes" content material="mild darkish"> -
@media (prefers-color-scheme: darkish)overrides -
[data-ogsc]selectors for Outlook.com / Outlook apps -
Specific dark-mode courses the place adaptation is appropriate
Shopper issues
-
-webkit-text-size-adjust -
Apple Mail reformatting disabled
-
PNG icons solely (no SVG)
Examined on
-
Gmail iOS / Android
-
iOS Mail
-
Outlook.com
-
Outlook Desktop
-
Apple Mail (macOS)
What nonetheless occurs
Regardless of the entire above:
-
Some background colours are inverted
-
Some textual content colours are overridden
-
This occurs inconsistently, however most frequently in Gmail
-
Model colours are affected, not simply impartial backgrounds
Core query
Is there any actually dependable, deterministic strategy to absolutely stop coloration inversion in HTML emails on Gmail and iOS Mail?
Or is that this habits basically unavoidable resulting from proprietary dark-mode rendering heuristics applied by e-mail purchasers?
Comply with-up (business apply)
If full prevention is inconceivable:
-
What’s the advisable manufacturing strategy in 2025?
-
Single adaptive template that tolerates partial inversion?
-
Two separate templates (mild + darkish)?
-
Hybrid strategy the place solely model sections are “locked”?
-
I’m particularly fascinated by real-world, production-proven methods, not theoretical CSS assist.
white mod:
darkish mod:
For anybody who needs to see the code or do some assessments, I am going to go away it right here:
https://drive.google.com/file/d/1Pv8itXvqIDKBknjkiPztgWwtQj3vsFZj/view?usp=sharing
