【问题标题】:How to use @media (prefers-color-scheme) in responsive email in Gmail?如何在 Gmail 的响应式电子邮件中使用@media(首选颜色方案)?
【发布时间】:2020-02-06 11:33:08
【问题描述】:
以下CSS 位于HTML 电子邮件的head 中,以在设备处于深色模式时更改电子邮件正文颜色。
@media (prefers-color-scheme: dark) {
.white-cont {
background: red !important;
}
}
它只在苹果邮件应用程序中转换电子邮件正文。 Gmail 应用程序不执行任何操作,整个邮件会自动转换为深色方案,这不太好。
如何使 gmail 电子邮件具有暗模式响应功能?为什么上面的标签在 gmail 中不起作用?有什么解决办法吗?
【问题讨论】:
标签:
css
gmail
html-email
android-dark-theme
【解决方案1】:
深色模式是电子邮件开发的一种趋势,它为电子邮件呈现更深的调色板,使其更适合光线不足的环境。 IOS、Android OS、MacOS Mojave 和更新版本以及 Outlook 2019 中的某些电子邮件客户端支持深色模式。
启用深色模式后,电子邮件本质上会反转颜色。曾经是白色的背景变暗(通常是十六进制颜色#333,深色的文本变亮。但是,并非所有内容都以预期的方式交换。图像和图块上的背景保持不变,看起来……关闭。更重要的是,没有两个电子邮件客户端采用相同的方法来呈现暗模式,因此需要实施一些创造性的解决方案,以便电子邮件继续按照开发人员的预期呈现。
坏消息是,我们无法通过@media 查询或为 Gmail 或 Outlook 生成的类名在电子邮件中通过 CSS 专门针对暗模式。 Gmail 替换 <style> 工作表中的颜色值,Outlook 将内联深色模式颜色值并向它们添加 !important,并且无法在 <style> 工作表中覆盖它。
解决方案
在 Google 和 Microsoft 提供解决方案之前,最好的方法是接受这是一个现实,并设计无论用户选择何种背景颜色来查看邮件都可以正常工作的电子邮件。越来越多的用户正在采用深色模式,因此它只会在未来变得更加流行。
祝你好运。