调查活动摘要电子邮件暗模式问题

用户体验
1

这本应是一篇带有几张图片和一个易于应用的解决方案的简短帖子。结果却失控了。HTML 电子邮件很难。为了好玩，这里有一个它可能出错的方式： Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub :slight_smile:

请随意浏览这篇帖子并查看图片。在帖子结尾，我差不多得出了结论，由于暗模式的流行，可能值得重新设计摘要电子邮件，而不是试图在其当前代码上打补丁。这不由我决定，也许我只是看了太久了。

关于摘要电子邮件在设置为暗模式的电子邮件客户端上的呈现方式，最近有一些常见问题。主要问题是，在通过完全反转颜色来处理暗模式的电子邮件客户端（Gmail 应用（iOS）、Outlook 2021（Windows）、Office 365（Windows）和 Windows Mail）上，摘要头的背景颜色会被反转。这会在标题颜色和站点徽标之间产生对比度问题。

这些电子邮件客户端在按钮的文本颜色和摘要的“自上次访问以来”部分也存在问题。

下面的所有图片均来自 Litmus 电子邮件测试服务：

来自具有暗色方案的 Discourse 站点，使用带有透明背景的白色 PNG 徽标：

预期（Gmail 应用暗模式 for Android）：

image
image644×910 54.8 KB

不佳（Gmail 暗模式 for iOS、OL Office 365 暗模式、Outlook 2021 暗模式、Windows 10 Mail 暗模式）：

image
image591×909 68.6 KB

image
image1468×929 38.8 KB

移动客户端概览（Gmail for iOS 是唯一在标题颜色方面明显存在问题的客户端）：

image
image1261×1107 174 KB

这是对 Meta 摘要电子邮件（默认浅色方案，透明背景上的暗 PNG 徽标）进行的相同测试。请注意，Meta 没有启用“为摘要应用自定义样式”站点设置，因此它没有为支持它们的客户端（Apple Mail 和较新版本的 iOS Mail）获取暗模式元标签和样式。如果启用了“为摘要应用自定义样式”设置，我怀疑 iPhone 暗模式测试在徽标/背景颜色对比度方面也会有问题。

image
image613×1011 64.1 KB

image
image526×898 94.2 KB

image
image1333×1137 329 KB

有几种方法可以强制电子邮件标题背景颜色与站点默认颜色方案的颜色匹配：

对于 iOS 版 Gmail 应用，可以通过使用 linear-gradient 创建的背景图像来设置标题背景颜色。以这种方式创建的背景图像不会反转颜色。诀窍是将两个 linear-gradient 颜色设置为 Discourse 站点默认颜色方案的“标题背景”颜色的值。

image
image638×901 70.8 KB

现在可以通过将自定义 CSS 添加到“管理 / 自定义 / 电子邮件样式 / CSS”选项卡来完成此操作。将颜色值设置为默认颜色方案的“标题背景”颜色的值。（注意，在电子邮件 CSS 编辑器中无法使用 var(--header_background) 来设置颜色）：

.digest-header {
    background-image: linear-gradient(#111, #111);
}

测试了这种方法用于 Meta 摘要电子邮件，我开始对其作为具有浅色默认颜色方案的站点的解决方案表示怀疑。徽标清晰可辨，但这看起来有点奇怪吗？

image
image1283×612 184 KB

对于 Outlook 2021 暗模式和 Windows 10 Mail 暗模式桌面电子邮件客户端，可以通过向为 .digest-header 设置的 background-color 添加 !important 规则来修复标题背景颜色反转的问题。这_无法_通过自定义 CSS 来实现，因为 Discourse 已经在元素上添加了一个没有 !important 规则的 background-color 样式。该规则在自定义 CSS 之后添加，因此具有优先权。（注意，此方法似乎仅适用于强制背景颜色为深色。当我尝试使用它强制标题背景为 #ffffff 时会失败。）

对于执行完全颜色反转的电子邮件客户端，“自上次访问以来”部分中的文本颜色问题似乎没有简单的解决方案。这里有一个 iOS Gmail 的技巧：https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/。它利用混合模式来欺骗 Gmail 设置白色文本颜色。理论上可行，但考虑到摘要电子邮件标记的复杂性，我认为不值得追求。

总而言之，我认为对于默认颜色方案为_暗色_方案的 Discourse 站点，目前的最佳解决方案是将其添加到“电子邮件样式 / CSS”选项卡中。这将使站点徽标在 iOS Gmail 暗模式应用上清晰可见。添加它没有在其他我测试过的电子邮件客户端中引起任何问题。对于默认_浅色_方案的站点，我对该方法不太确定。在整个深色屏幕上强制显示白色标题背景看起来不太好。

摘要电子邮件是在暗模式尚未普及之前开发的。也许由于暗模式近期的流行，重新设计摘要电子邮件以使其在流行电子邮件客户端的暗模式和浅模式下都能良好显示是有意义的。

如果完全重新设计摘要电子邮件超出范围，可能值得考虑提供 dark_mode_digest_logo 和 light_mode_digest_logo 设置。在至少一些电子邮件客户端上，将可以检测到模式并显示相应的徽标。

为了改善 Outlook 桌面客户端上的暗模式，Discourse 可以在电子邮件的 HTML 中保留一些类名，而不是全部删除。这些类名可用于定位 Outlook 上的暗模式：https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402。（注意，Outlook 无法处理元素上的多个类名，因此仍需要从 digest.html.erb 文件中删除一些类名。）

7 个赞
2

我意识到我可能没有足够清楚地说明最明显的问题。apply custom styles to digest（应用自定义样式到摘要）站点设置默认启用。该设置用于添加元标签和 CSS 规则，当用户在设备上启用了暗模式时，它会导致 iOS 电子邮件客户端以暗模式显示电子邮件。

除非采取特殊措施上传一个在浅色和深色背景下都有足够对比度的摘要徽标，否则，对于那些徽标针对浅色背景进行了优化的站点，在流行的电子邮件客户端的暗模式下查看的摘要电子邮件将看起来像这样：

image
image1279×1119 211 KB

禁用 apply custom styles to digest（应用自定义样式到摘要）站点设置实际上会产生更好的结果。禁用该设置后，暗模式样式将不会应用于 iOS 邮件应用。但它们仍将应用于 Andriod 电子邮件客户端和 iOS Gmail 应用。

可能目前的最佳实践是尝试将徽标上传到 digest logo（摘要徽标）站点设置，使其在浅色和深色背景下都能良好显示。如果做不到这一点，默认颜色方案为_浅色_的 Discourse 站点应禁用 apply custom styles to digest（应用自定义样式到摘要）站点设置。默认颜色方案为_深色_的 Discourse 站点应保持该设置启用。不要将关于 apply custom styles to digest（应用自定义样式到摘要）站点设置的建议视为最终决定，但根据一些测试，这似乎是正确的方法。

这仅适用于支持 @media (prefers-color-scheme) 的电子邮件客户端：https://www.caniemail.com/features/css-at-media-prefers-color-scheme/。在其他电子邮件客户端上，可能会有导致两个版本的徽标都出现的风险。

5 个赞
3

Simon，非常感谢你这项细致的工作 :+1: :exploding_head:

这太糟糕了。我在智能手机上就遇到了这个问题，我甚至不明白为什么强制反转颜色而不考虑内容会被认为是好主意。

3 个赞
4

我想知道一个可能的解决方案是，我们不使用徽标，而是创建一个矩形格式的图像，其中包含网站徽标和网站当前使用的标题背景色。

我们需要在后端执行此操作，但使用带有包含的颜色的图像块作为背景将阻止 Gmail 反转背景的颜色。

就我而言，我在 Gmail 应用的深色模式下测试了多个大型品牌电子邮件，其中大多数也尚未解决此问题。

2 个赞
5

不这样做，可以在大多数电子邮件客户端上强制设置特定的背景颜色，但一些旧的 Outlook 桌面电子邮件客户端似乎是个例外。（我猜深色模式在桌面客户端上使用率不高。）

对于 iOS（不包括 Gmail）电子邮件客户端，如果启用了 apply custom styles to digest 设置，Discourse 已经在这样做了。问题在于它硬编码了背景颜色，而不是遵循网站的“标题背景”颜色：

[dm='header'] 规则可以更改为：

"
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
"

如果合理的话，可以对“自上次访问以来”部分采取类似的方法：

"
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
"

请注意，深色模式样式的 dm 属性在此处添加到电子邮件：discourse/lib/email/styles.rb at main · discourse/discourse · GitHub

类似这样的东西应该可以解决 iOS（不包括 Gmail）电子邮件客户端的问题。

对于 iOS Gmail 客户端，可以通过设置线性渐变来强制设置背景颜色。以这种方式为所有电子邮件客户端设置线性渐变背景似乎没有意外的副作用。因此，只需将线性渐变背景颜色添加到发送给所有电子邮件客户端的内联 CSS 中即可。

我怀疑，对于执行完全颜色反转的电子邮件客户端，处理“自上次访问以来”部分的解决方案是让客户端执行反转，但要确保 email accent accent bg color 和 email accent fg color 设置之间有足够的对比度：

image
image766×219 17 KB

这应该可以防止出现这种情况（使用这些设置的默认值）：

image
image532×623 47.5 KB

1 个赞
6

Discourse 现在可以做的最简单的更改，以增加摘要电子邮件在暗模式下正确显示的几率，就是不要默认启用 apply custom styles to digest（应用自定义样式到摘要）站点设置。（注意，这只会影响 iOS 电子邮件客户端。）

另一个小改动是更新 digest logo（摘要徽标）站点设置的文案，鼓励上传一个在浅色或深色背景色上都具有足够对比度的徽标。深色徽标的常用技巧是给徽标添加一个白色轮廓。

可能，Emails / Preview summary（电子邮件 / 预览摘要）页面应该发出警告，提示某些电子邮件客户端在暗模式下查看电子邮件时会执行“全彩反转”。可以鼓励站点所有者在他们可以访问的任何电子邮件客户端上测试他们的摘要电子邮件在暗模式下的显示效果。

1 个赞
7

谢谢提供细节！

作为一种快速的临时解决方案，我在“邮件”设置中添加了以下 CSS：

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

这使得标题背景变亮，我的 Logo 现在可以正确显示（至少在预览中是这样）。