在 iOS Gmail 上处于深色模式时，HTML 电子邮件、CSS 会反转

Question

我有一封从 Nodejs 应用程序发送的 HTML 电子邮件，但是当在 iOS 上的 Gmail 上查看该电子邮件时，所有具有背景颜色或颜色属性的元素都会被反转。最明显的是黑/白元素。我看到很少有指南和文章试图解决这个问题，但没有任何帮助。

我尝试添加这些元标签：

<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">

iOS 上的 Outlook 尊重它们，而 iOS 上的 Gmail 则不然。

我也尝试用这个媒体标签覆盖它：

@media (prefers-color-scheme: dark ) {
#header {
background-color: black!important;
height: 60px;
padding-left: 15px;
padding-right: 15px;
/* padding: 17px; */
 }
 #headerLink{
  color: white!important;
}
}

Answer 1

遗憾的是，Gmail 不支持您尝试执行的媒体查询。看这个表

但是，Gmail 现在支持 CSS 混合模式，您可以将它们用于这些目的。我在网上发现了这篇文章，方法非常新颖。

基本上，它使用

screen

和

difference

混合模式，这样当 Gmail 反转颜色时，它会减去这些颜色的值并将它们混合成基本上原始的颜色。本文还提供了一种仅定位 Gmail 的方法，以避免与其他电子邮件提供商出现问题，并使用简单的选择器技巧：

“Gmail 使用

<u>

元素替换电子邮件的文档类型。”因此，您可以使用下一个同级组合器

来定位您需要的任何元素（值得注意的是，您需要向

<body>

添加一个类）。

u + .body .yourElement{ mix-blend-mode: difference; }

除非您在其他地方使用

<u>

元素（考虑到现代实践，这非常罕见），否则这对您来说效果很好。此外，混合模式如今拥有良好的浏览器支持（96%+）。

希望对您有帮助！

在 iOS Gmail 上处于深色模式时，HTML 电子邮件、CSS 会反转

问题描述投票：0回答：1

1个回答

最新问题

在 iOS Gmail 上处于深色模式时，HTML 电子邮件、CSS 会反转

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1