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 版本也是如此)(正确):

如果您使用深色主题(不显示 bg-color (#27273F))，则 iOS 上的 Gmail 移动版的外观如下:

问题

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

其他信息

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

谢谢!

Answer 1

Gmail iOS 深色模式会不假思索地完全反转您的颜色。因此，即使是深色电子邮件也会在“深色模式”下变为浅色，正如您所经历的那样!

此外，Gmail iOS 不提供 @media (prefers-color-scheme) 等控件。

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

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