如何在 Gmail 的响应式电子邮件中使用 @media (prefers-color-scheme)？

Question

以下CSS是在head设备处于黑暗模式时更改电子邮件正文颜色的 HTML 电子邮件。

@media (prefers-color-scheme: dark) {
  .white-cont {
    background: red !important;
  }
}

它仅在苹果邮件应用程序中转换电子邮件正文。Gmail 应用程序什么都不做，整个邮件会自动转换为深色方案，这不太好。

如何使黑暗模式响应 Gmail 电子邮件？为什么上面的标签在 gmail 中不起作用？任何解决方案？

Answer 1

暗模式是电子邮件开发的一种趋势，为电子邮件呈现更深的调色板，使其更适合低光环境。IOS、Android 操作系统、MacOS Mojave 和更新版本以及 Outlook 2019 中的一些电子邮件客户端支持暗模式。

启用暗模式后，电子邮件本质上会反转颜色。曾经是白色的背景会变暗（通常是十六进制颜色 #333，暗的文本会变亮。但是，并非所有内容都以预期的方式交换。图像和图块上的背景保持不变，看起来......关闭。更重要的是，没有两个电子邮件客户端采用相同的方法来呈现暗模式，因此需要实施一些创造性的解决方案，以便电子邮件继续按开发人员的预期显示。

坏消息是，我们无法通过电子邮件中的 CSS 通过@media查询或为 Gmail 或 Outlook 生成的类名专门针对暗模式。Gmail 替换工作表中的颜色值，<style>Outlook 将内联深色模式颜色值并向其中添加 ，!important从而无法在工作<style>表中覆盖它。

解决方案

在谷歌和微软提供解决方案之前，最好的方法是接受现实并设计电子邮件，无论用户选择什么背景颜色查看它们。越来越多的用户正在采用暗模式，因此它只会在未来变得更受欢迎。

祝你好运。