暗模式下的电子邮件呈现

Posted 2023-03-24

【中文标题】暗模式下的电子邮件呈现

【英文标题】：Email Rendering in Dark Mode

【发布时间】：2021-01-08 07:12:24

【问题描述】：

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

请查看附件图片，了解它在黑暗模式下的样子：

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

谁能帮我解决这个绿色标题问题。

谢谢！

【问题讨论】：

最好的办法是在原木周围添加光晕或描边并保持透明。暗模式仍然是新的，没有修复，只有这个解决方法。

欢迎来到 Stack Overflow！添加一些代码肯定会帮助我们帮助您。请阅读how to create a minimal reproducible example。

第一张图片好像是透明的，第二张不是。以与第二个相同的方式制作第一个 - 使用绿色背景。

【参考方案1】：

使用

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

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

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

再次像以前一样发明颜色

【讨论】：

你是否将它应用到有问题的标题

是的，我在标题中添加了它。

那你能告诉我你在做什么来存档暗模式

@KrishnaNoutiyal 恐怕不是 CSS 中的所有内容都可以在电子邮件中使用

【参考方案2】：

截至今天，我们无法通过 HTML 或 CSS 影响支持深色模式的 Outlook 或 Gmail 客户端的颜色或行为。 Gmail 会替换 <style> 工作表中的颜色值，Outlook 将内联深色模式颜色值并为其添加一个 !important 并使其无法覆盖。

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

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

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

祝你好运。

【参考方案3】：

没有看到您的代码，很难确切知道问题出在哪里。

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

Litmus 有一个很棒的 dark mode guide，它分解了暗模式在不同 ESP 中的工作原理以及如何最好地优化您的电子邮件。

最好的办法是让绿色部分像第二个一样。