黑暗模式下的HTML邮件

问题描述

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

IntervalSC()

整体翻转颜色后，向后翻转图片和视频看起来效果很好。唯一的缺陷是，这也会使表情符号的颜色发生翻转，从而使它们看起来很恐怖。

我也尝试过混合颜色。

dashboardController.Screenshot

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

这涉及一个问题：如何使以下文本显示为白色，并保持表情符号正常显示。

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

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

预期结果：

---编辑---

一个很好的例子是苹果邮件应用程序：

使用HTML发送邮件：

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

解决方法

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

darkmode frontend html