5

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

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

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

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

4

1 回答 1

13

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

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

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

解决方案

在谷歌和微软提供解决方案之前，最好的方法是接受这是一个现实，并设计无论用户选择何种背景颜色来查看它们的电子邮件。越来越多的用户正在采用暗模式，所以它只会变得越来越流行。

祝你好运。

于 2020-02-06T17:48:12.073 回答