暗模式下的电子邮件呈现

问题描述

在黑暗模式下渲染自定义编码的HTML电子邮件模板时出现问题。电子邮件和所有颜色都可以正常工作,除了这一顶部标题。我无法弄清楚为什么在“黑暗模式”下查看电子邮件时绿色变暗。

请查看附件中的图片以了解其在黑暗模式下的外观:

Dark Mode Issue

相反,它应呈现绿色,如:

Light Mode

任何人都可以帮助我解决此绿色标头问题。

谢谢!

解决方法

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

在Apple / IOS客户端上,您可以使用:

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

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

祝你好运。

,

在没有看到您的代码的情况下,很难确切地知道问题所在。

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

Litmus具有出色的dark mode guide,它可以解释暗模式在不同ESP中的工作方式以及如何最佳地优化电子邮件。

您最好的选择是使绿色部分像第二张一样。

,

使用

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

反转网页的颜色以及您不希望反转彩色类型的地方

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

再次发明以前的颜色