css - 如何在 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> 中的颜色值sheet 和 Outlook 将内联暗模式颜色值并添加 !important并使其无法在 <style> 中覆盖它床单。

解决方案

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

祝你好运。