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

Question

在HTML电子邮件的中添加以下CSS，当设备进入暗模式时，可以更改电子邮件正文颜色。

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

邮件在苹果邮件应用中只显示正文。 Gmail应用程序不做任何事情，整个邮件会自动转换为暗色调色彩方案，这并不好。

如何使Gmail电子邮件支持深色模式？为什么上述标记在Gmail中不起作用？有什么解决办法吗？

- Salitha

Answer 1

暗黑模式是电子邮件开发中的一种趋势，它采用较暗的颜色调色板来展示邮件，以使其在低光环境下更加适宜。IOS、Android操作系统、MacOS Mojave及更新版本和Outlook 2019支持黑暗模式。

启用暗黑模式后，邮件实际上会反转颜色。原本白色的背景变成了暗色（通常是十六进制颜色#333），而原本为暗色的文本则变成了亮色。但并不是所有东西都按照预期的方式交换。图像和瓷砖的背景仍然保持不变，这看起来有些奇怪。更让问题复杂的是，没有两个电子邮件客户端使用相同的方法来呈现暗黑模式，因此需要实施一些创造性的解决方案，以便邮件继续按照开发人员的预期外观。

不幸的是，我们无法通过电子邮件中的CSS针对Gmail或Outlook具体定位暗黑模式，也不能通过@media查询或生成的类名直接定位。 Gmail将在<style>表中替换颜色值，而Outlook将内嵌暗黑模式颜色值并添加!important，使其无法在<style>表中被覆盖。

解决方案

在谷歌和微软提供解决方案之前，最好的方法是接受这一现实，并设计电子邮件，使其无论用户选择查看的背景颜色如何都能正常工作。越来越多的用户正在采用深色模式，因此它只会在未来变得更加流行。

祝好运。

- gwally