Gmail/移动/iOS/深色模式下不显示 HTML 电子邮件背景颜色

Question

介绍信息

我为电子邮件编写了 MJML 代码，然后将其转换为 HTML。结果，一切正常，但如果满足以下条件，则不会显示背景颜色：

• 电子邮件客户端是Gmail
• 使用手机版
• 深色主题已激活
• 操作系统是iOS

示例

为

mj-wrapper

标签和

mj-section

标签设置背景颜色：

• <mj-wrapper background-color="#27273F" background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" background-size="cover">

• <mj-section padding-left="32px" padding-right="32px" background-color="#27273F" />

这就是它在桌面上的样子（正确）：

这是 Android 上的 Gmail 移动版本的外观（使用浅色主题的 Gmail 移动 iOS 版本相同）（正确）：

如果您使用深色主题（不显示背景颜色（#27273F）），那么 iOS 上的移动版 Gmail 中的外观如下：

问题

您能帮我找出导致问题的原因以及如何解决它吗？

附加信息

GitHub 链接 - 在这里您可以看到 HTML 和 MJML 代码

谢谢！

Answer 1

Gmail iOS 深色模式无需考虑即可完全反转您的颜色。因此，即使是深色电子邮件也会在“深色模式”下变为浅色，正如您所经历的！

此外，Gmail iOS 不提供@media（首选颜色方案）等控件。

我注意到图像没有反转。也许将横幅作为图像看起来不错，底部逐渐变为透明（保存为 png24）。然后在浅色模式下，它会淡入深色，但在深色模式下，它会淡入浅色。

一个可能有效也可能无效的技术性选项可能是（未经测试）拥有您想要的颜色的 1x1 像素背景图像，然后使用此 hack 使文本保持白色：https://www.hteumeuleu.com/ 2021/修复-gmail-dark-mode-css-blend-modes/.

Answer 2

文本部分已排序，但我想了解包装器