ARTICLE AD BOX
I am building a transactional HTML email (not marketing) where brand color fidelity is critical.
The email is generated server-side (Node.js) and uses a strictly table-based layout for maximum compatibility.
The company’s primary brand colors are yellow and blue, and preserving those exact colors is mandatory.
The problem
When the email is viewed in dark mode, some colors are still automatically inverted or overridden by the email client:
Gmail (iOS and Android) — most frequent
iOS Mail — intermittent
Gmail Web — occasionally
In light mode, the email renders exactly as intended.
This behavior appears client-driven, not caused by missing CSS support.
What I have already implemented
I have intentionally implemented every currently documented mitigation:
Layout
Table-only layout (no div, flex, or grid)
Fixed 600px container with max-width:100%
No external CSS
No background images for brand-critical areas
Color protection
Inline styles on every element
bgcolor attributes on all <table> and <td> elements
Explicit triple declarations (bgcolor, background-color, color)
No shorthand CSS
Dark mode handling
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
@media (prefers-color-scheme: dark) overrides
[data-ogsc] selectors for Outlook.com / Outlook apps
Explicit dark-mode classes where adaptation is acceptable
Client considerations
-webkit-text-size-adjust
Apple Mail reformatting disabled
PNG icons only (no SVG)
Tested on
Gmail iOS / Android
iOS Mail
Outlook.com
Outlook Desktop
Apple Mail (macOS)
What still happens
Despite all of the above:
Some background colors are inverted
Some text colors are overridden
This happens inconsistently, but most often in Gmail
Brand colors are affected, not just neutral backgrounds
Core question
Is there any truly reliable, deterministic way to fully prevent color inversion in HTML emails on Gmail and iOS Mail?
Or is this behavior fundamentally unavoidable due to proprietary dark-mode rendering heuristics implemented by email clients?
Follow-up (industry practice)
If full prevention is impossible:
What is the recommended production approach in 2025?
Single adaptive template that tolerates partial inversion?
Two separate templates (light + dark)?
Hybrid approach where only brand sections are “locked”?
I am specifically interested in real-world, production-proven strategies, not theoretical CSS support.
white mod:

dark mod:

For anyone who wants to see the code or do some tests, I'll leave it here:
https://drive.google.com/file/d/1Pv8itXvqIDKBknjkiPztgWwtQj3vsFZj/view?usp=sharing




