暗模式下的 HTML 邮件答案

【问题标题】：HTML Mails in Dark Mode暗模式下的 HTML 邮件
【发布时间】：2021-02-08 08:34:18
【问题描述】：

我正在处理一个电子邮件项目，需要在暗模式下显示电子邮件正文。电子邮件正文是具有定义颜色样式的 HTML。我的目标是翻转文本和背景颜色以在暗模式下显示它。像这样定义深色方案样式

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(1) hue-rotate(180deg);
    }

    img, video {
        filter: invert(1) hue-rotate(180deg);
    }
}

整体翻转颜色后，将图片和视频翻转回来看起来效果不错。唯一的缺陷是这也会翻转表情符号的颜色，这让它们看起来很糟糕。

我也尝试过混合颜色。

   color: white;
   mix-blend-mode: screen;

这也会使表情符号的颜色变亮。而且它不会使黑色文本显示为白色。

归结为一个问题：如何让以下文字显示为白色，并保持表情符号正常显示。

<div style="color: black;">
      Hello world!  ???? ???? ????
</div>

预期结果：

---已编辑---

Apple 邮件应用就是一个很好的例子：

使用 HTML 发送邮件：

<div>Test colors: </div>
<div style="color: black;">Black</div>
<div style="color: green;">Green</div>
<div style="color: red;">Red</div>
<div style="color: pink;">Pink</div>
<div style="color: blue;">Blue</div>
<div style="color: yellow;">Yellow</div>
<div style="color: gray;">Grey</div>
<div style="color: white;">White</div>
<div style="color: #8300bb;">Purple</div>

【问题讨论】：

你不能只使用通常的 CSS 吗？ @media (prefers-color-scheme: dark) { html { background: black; color: white; } }
这不会覆盖样式中的颜色定义。即使添加一个 !important 标签，它也会使所有颜色变为白色。实际上，Apple 邮件应用程序可以在深色模式下继续显示多种颜色。
您的意思是这是一个特殊性问题还是应用程序不允许您更改它？
因为收到的邮件的HTML是不受控制的，所以只能根据它进行更改。作为一个邮件应用程序，我可以控制 HTML 的显示。

标签： html css frontend darkmode

【解决方案1】：

您应该将您的表情符号与一类表情符号放在一起。然后，在 CSS 中，连同正文一起，您应该反转它。

如果您反转反转的东西，它会恢复正常！ :)

我认为你需要这样的东西：

html {
     background: white;
     color: black;
}

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(1);
    }
    .emoji { 
        filter: invert(1); 
    }
}

<div> Hello world! 
    <span class="emoji">? ? ?</span> 
</div>

【讨论】：