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

Question

以下 CSS 在 HTML 电子邮件的 head 中，用于在设备处于深色模式时更改电子邮件正文颜色。

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

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

如何使 gmail 电子邮件具有暗模式响应？为什么上面的标签在 gmail 中不起作用？有什么解决办法吗？

Answer 1

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

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

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

解决方案

在 Google 和 Microsoft 提供解决方案之前，最好的方法是接受这是一个现实，并设计无论用户选择何种背景颜色查看它们都有效的电子邮件。越来越多的用户采用深色模式，因此它只会越来越受欢迎。

祝你好运。