1

我正在处理一个电子邮件项目,需要在暗模式下显示电子邮件正文。电子邮件正文是具有定义颜色样式的 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>
4

1 回答 1

2

您应该将您的表情符号与一类表情符号放在一起。然后,在 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>

于 2020-10-26T08:49:19.220 回答