HTML 邮件进入深色模式后，颜色显示“失真”几乎是无法回避的常见问题。最典型的现象是：原本设置好的黑底白字，会被邮件客户端强制改成灰底黑字，直接影响视觉一致性与内容可读性。更实际的是，单靠纯 CSS 的 @media (prefers-color-scheme) 往往难以彻底解决，因为它在主流邮件客户端中的兼容性始终不够理想，尤其是在 iOS Gmail、Outlook iOS 以及 Pardot/Account Engagement 这类环境中表现更明显。因此，更可靠的做法通常不是依赖单一技术方案，而是优先考虑邮件客户端兼容性，采用渐进式适配策略来处理 HTML 邮件深色模式问题。
HTML 邮件在深色模式下出现颜色异常（例如黑底白字被系统强制转换为灰底黑字）是非常常见的适配难点；目前纯 CSS `@media (prefers-color-scheme)` 在主流邮件客户端中，尤其是 iOS Gmail、Outlook iOS、Pardot/Account Engagement 里的支持度较差，因此应采用以兼容性为核心的渐进式优化方案。
如果你正在为 Salesforce Pardot（现 Account Engagement）制作营销分发用的 HTML 邮件，并遇到这个问题，其实并不少见：通过 Figma + Emailify 导出的深色背景模块（#2d2d2d + #ffffff），在 iPhone 的 Gmail App 或系统级深色模式下，往往会被自动“重绘”为不够协调的浅灰背景（例如 #d8d8d8）搭配黑色文字。这里的问题并不是代码没有生效，真正发生的情况是：邮件客户端主动接管了颜色渲染逻辑。
遗憾的是，截至 2024 年，纯 CSS 方案（包括 @media (prefers-color-scheme: dark)）在大多数邮件客户端中依旧不稳定、不可靠。根据 Litmus 最新兼容性报告（2024–2024），该媒体查询目前仅在 Apple Mail（macOS/iOS）、Thunderbird 以及少量 Webmail 中部分生效；而 Gmail App（iOS/Android）、Outlook iOS、Yahoo Mail、Pardot 内置渲染器则会完全忽略这条规则——这也正是你即使添加了 !important 仍然看不到效果的根本原因。
✅ 更稳妥的应对方法：采用「客户端感知 + 语义化颜色 + 安全降级」三重保障策略：
避免使用高对比的极端色值
不要将纯黑（#000000）或纯白（#ffffff）直接作为背景色或正文主色。更建议改用「深灰 + 浅灰」这类更安全的配色组合：Na vigate What’s Next
...
使用
声明色彩偏好（作用有限，但值得保留）
在中加入以下代码（对 Apple Mail 和部分 iOS 客户端会有一定效果）：⚠️ 需要注意：此标签并不能强制覆盖邮件客户端自身的深色模式逻辑，但可以向系统传达“本邮件已支持深色模式”的信号，从而尽量减少过度反转。
关键内容区域使用内联
background+bgcolor双重声明（增强 Outlook/Pardot 兼容性）Na vigate What’s Next
终极保险方案：禁用深色模式自动反转（仅适用于 Apple 生态）
针对 iOS/macOS 用户，可以在深色区块中添加style="-webkit-appearance: none; -webkit-text-fill-color: #f0f0f0;"，并结合background-color进行显式锁定。虽然这种方式无法阻止 Gmail 的自动改色，但在 Apple Mail 中通常能获得更稳定的 HTML 邮件渲染效果。
? 优化总结与实操建议：
- 在 Emailify 导出后，手动将所有
#2d2d2d替换为#1a1a1a，将#ffffff替换为#f0f0f0或#e6e6e6，以提升深色模式下的稳定性； - 删除所有
@media (prefers-color-scheme)的尝试——在 Pardot 与 Gmail 邮件场景中几乎没有实际优化价值； - 邮件发送前，务必通过 Litmus 或 Email on Acid 测试 iOS Gmail、Outlook iOS、Apple Mail 三端的显示与渲染表现；
- 如果业务条件允许，可针对高价值用户群提供「浅色主题」订阅选项，并在邮件头部加入切换链接，由服务端动态输出不同主题版本。
HTML 邮件深色模式适配，并不是“写好 CSS 就一定能解决”的简单前端问题，而是邮件客户端生态高度碎片化下的一种兼容性工程取舍。只有坚持「安全色值 + 双属性声明 + 客户端实测」这套方法，才能真正交付稳定、可控、跨平台一致的邮件体验。
