ToddZ
1
我使用的是默认主题,没有任何主题组件或 CSS 自定义。在“设置”中,我为摘要电子邮件指定了白色的“深色模式”徽标,因为摘要的徽标背景区域是深色的。通常看起来效果很好:
但是,当我在 iPhone 上的 Gmail 应用中以设备深色模式接收摘要时,徽标背景区域会反转为白色(或浅白色),导致徽标几乎看不见:
在桌面上,我可以使用 Chrome 检查器预览深色模式。它不会将徽标背景色反转为白色。但它会切换为我的默认(“浅色模式”)徽标,使其在深色模式下几乎看不见:
这让我非常困惑……我不知道我看到的是错误,还是我对移动设备深色模式的工作方式有错误的期望……
我想我可以在我的默认徽标周围添加一个黑色描边,这样它在浅色背景上效果会更好。
但我很乐意接受任何关于如何正确实现适用于所有设置的摘要徽标+背景组合的提示。
1 个赞
simon
2
只是为了确认,您是否对位于“管理”/“自定义”/“电子邮件样式”中的 Discourse HTML 电子邮件模板进行了任何更改?另外,您是否在该页面上的 CSS 选项卡中添加了任何 CSS?
另外,您的站点上是否启用了“将自定义样式应用于摘要”站点设置?该设置默认启用。
假设您所做的任何自定义都没有导致此问题,我猜测发生的情况是默认 Discourse 电子邮件模板中的 %{dark_mode_styles} 占位符将被通过此方法添加的 CSS 替换:
该方法将以下 CSS 添加到模板中:
[dm='header'] {
background: #151515 !important;
}
该 CSS 旨在在设备设置为暗模式查看电子邮件时使摘要标题变暗,但也许某些设备会忽略 !important 指令并显示反转的颜色。
我无法在我的 Android 手机上重现此问题。我没有 iPhone 可以进行测试。也许其他人可以在 iPhone 的暗模式下尝试查看摘要电子邮件?
1 个赞
ToddZ
3
您好 Simon – 感谢您的回复。
我没有修改过邮件模板的自定义 HTML 或 CSS。我确实禁用了“应用自定义样式到摘要”,但正如预期的那样,这没有任何效果。
如果有人想发布或私信我一个地址,我很乐意发送一封摘要邮件……
1 个赞
simon
6
我收到过来自该网站发送给我的电子邮件。它们在我的 Android 手机的 Gmail 应用中以深色模式正确显示。我没有 iOS 设备可以进行测试。
在 @ToddZ 的 iOS 设备上,无论是否启用“应用自定义样式到摘要”设置,他都会得到相同的结果:
我猜想 iOS 的 Gmail 应用仍然不支持 prefers-color-scheme 媒体查询:https://www.caniemail.com/features/css-at-media-prefers-color-scheme/。该页面还说 Android 不支持它,但电子邮件在我 Android 的 Gmail 中显示正常。
有点相关的是,可能值得在某处注明,需要启用“应用自定义样式到摘要”设置才能应用添加到电子邮件模板的深色模式 CSS。
@isaac,我不确定你是否还在处理这个问题。可能值得测试一下 iOS 上的 Gmail 是如何处理这个问题的。特别是当 Discourse 网站的默认主题使用深色配色方案时。
ToddZ
7
有趣的是,我刚刚注意到在 Windows 上有一个邀请邮件也出现了类似的问题。
(不过,这个在 iOS 上看起来没问题。)
这是 Win11 22H2 版本,以及使用系统主题的 Thunderbird(使用操作系统亮色/暗色设置)。
Windows 暗色模式:
(亮色模式看起来不错。)
1 个赞
simon
8
如果您有机会,能否尝试启用“apply custom styles to digest”(对摘要应用自定义样式)网站设置来触发相同的电子邮件?该设置是否会影响电子邮件在 Thunderbird 暗模式下的呈现方式?
另外,能否再次检查以确保“Admin / Customize / Email Style”(管理员/自定义/电子邮件样式)下的电子邮件模板未被编辑?如果未编辑,该页面上的“Reset to default”(重置为默认值)按钮将处于禁用状态:
我想知道的是,我在截图中突出显示的 dark_mode_meta_tags(暗模式元标签)和 dark_mode_styles(暗模式样式)键是否存在于模板中。
simon
11
我怀疑问题的根源在于这篇博文的“默认黑暗模式:全彩反转”部分:https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers。
全彩反转是最具侵入性的配色方案:它不仅反转浅色背景的区域,还会影响深色背景。
因此,如果您已经将电子邮件设计为深色主题,此方案将讽刺地迫使它们变成浅色。不幸的是,这目前是一些更受欢迎的电子邮件客户端使用的策略,例如 Gmail 应用(iOS)、Outlook 2021(Windows)、Office 365(Windows)和 Windows Mail。
该博文中的问题示例与您报告的情况相符:
拥有 Discourse 的 Litmus 帐户访问权限的人需要进行测试。要重现该问题,请尝试从默认主题的配色方案设置为深色主题的 Discourse 网站向 Litmus 发送摘要电子邮件。
假设这会触发该问题,简单的解决方法是始终为电子邮件使用浅色主题,而不管已分配给 Discourse 上默认主题的配色方案是什么。我链接的博文中“Gmail iOS 和 Outlook Windows 特定定位”部分也提出了一个可能有效的方法。但这有点像一种 hack。
最终处理此问题的人可能还会查看 apply custom styles to digest(应用自定义样式到摘要)网站设置目前需要启用才能为实际支持黑暗模式的电子邮件客户端添加黑暗模式支持的方式。Discourse 用户界面中没有任何内容能明显表明此设置与黑暗模式支持有关。
1 个赞
ToddZ
12
是的,全彩反转 似乎正是我所看到的,至少在 iOS Gmail 的摘要/概览中是这样。
我现在没有精力去解析那整篇文章并找出合适的解决方法,但我最终必须尝试一些方法。用于发布 Gmail 示例的 GitHub 线程自 2019 年以来一直开放,并提出了许多解决方法,但没有迹象表明底层行为会发生变化。
我希望 Discourse 团队能够进行一些通用调整,以统一跨平台的显示效果。
1 个赞
simon
15
根据我从贵站收到的摘要邮件来看,我猜贵站默认采用了深色配色方案。在这种情况下,您可以通过将以下代码添加到贵站的“管理/自定义/邮件样式/CSS”选项卡来解决 iOS 版 Gmail 应用中出现的标题背景颜色问题:
.digest-header {
background-image: linear-gradient(#111, #111);
}
请注意,添加到 linear-gradient 的颜色应相同。它们应与您默认主题的配色方案的“标题背景”颜色值匹配:
我认为这只适用于默认设置为深色配色方案的网站。有关其工作原理的详细信息,请参见此处:https://meta.discourse.org/t/investigating-activity-summary-email-dark-mode-issues/282272。
1 个赞