深色模式下的电子邮件渲染

Question

我在深色模式下呈现自定义编码的 HTML 电子邮件模板时遇到问题。除了这个顶部标题之外，电子邮件和所有颜色都工作得很好。我无法弄清楚为什么在深色模式下查看电子邮件时绿色会变深。

请参阅附图，了解深色模式下的外观：

相反，它应该呈现绿色，如下所示：

任何人都可以帮我解决这个绿色标题问题吗？

谢谢！

Answer 1

截至目前，我们无法通过 HTML 或 CSS 影响支持深色模式的 Outlook 或 Gmail 客户端的颜色或行为。 Gmail 会替换

<style>

工作表中的颜色值，Outlook 将内联深色模式颜色值并向其添加 !important，使其无法覆盖。

在Apple / IOS客户端，您可以使用：

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

在 Gmail 和 Outlook 提供解决方案之前，您将不得不使用 Gmail 创建正面颜色，而 Outlook 将所有内容更改为相当标准的颜色组（主要是 #333333）。

祝你好运。

Answer 2

如果没有看到您的代码，就很难确切地知道问题是什么。

正如其他人提到的，如果图像是透明的并且您依赖背景颜色，这将是导致此更改的原因。一些 ESP（电子邮件服务提供商）反转背景和文本颜色 - 明亮的颜色（例如绿色）变得更暗。一些 ESP 还会在深色模式下使较暗的颜色变得更亮。某些 ESP 允许您使用媒体查询设置特定的暗模式背景和文本颜色，但并非所有 ESP 都支持这一点。

Litmus 有一个很棒的 深色模式指南，它详细介绍了深色模式在不同 ESP 中的工作原理以及如何最好地优化您的电子邮件。

您最好的选择是使绿色部分成为像第二个一样的图像。

Answer 3

因为它们在深色模式下反转颜色。

您的情况的解决方案是放置纯背景图像。

Answer 4

使用

filter: invert(1) hue-rotate(180deg) 

反转网页的颜色以及您不想反转颜色类型的地方

filter: invert(1) hue-rotate(180deg) 

再次发明以前的颜色