如何在深色模式下处理徽标颜色？

Question

我试图添加一个黑暗模式在我的网站上通过喜欢-颜色方案网页套件。然而，我的标志都是黑色的，而我的头是白色的。在黑暗模式下，它应该是相反的。我的标志是在PNG和我认为这不会是一个坏主意，以某种方式上传两个徽标与不同的选择器，并隐藏一个通过CSS在光模式，另一个在黑暗模式。我的问题是:有什么办法吗？

如果没有，有没有人有其他的想法，我怎样才能达到我所需要的？

编辑：

我试着做和这个人完全一样的事情：https://www.youtube.com/watch?v=eY4M7HtP9LA&t

然而，他的标志是一个简单的文本，所以他可以很容易地改变它的颜色通过CSS。我的在巴布亚新几内亚，我不能这么做。

Answer 1

1. 应用filter: invert(1)在黑暗模式，如果你的标志是足够简单(在灰色的阴影)。
2. 覆盖您的黑暗模式徽标之上的正常标志，并改变不透明度。，这就是我们要做的。我们的标志由两行文字组成，一条是黑色的，另一条是彩色的。我们在两个容器中有相同的徽标，一个容器覆盖在另一个容器上(position: absolute)，但是一个容器的高度是徽标的一半，仅覆盖第一行文本，并应用了invert过滤器。当切换到黑暗模式(与冷过渡)时，倒置的徽标(一条白线文本)将被显示出来。
3. 使用SVG。