html - 为什么在恢复过滤器后设置颜色会损失精度？

Question

我正在尝试为简单的 HTML 页面创建类似暗模式的场景。

我有一个类在定义为的类child下说：parentlight.css

.parent{
}

.child{
  background: #780000;
}

在dark.css中，我将整个（创建暗模式）html 反转为：

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
}

我想保留一些元素的原始颜色。所以，我再次invert和hue-change那些元素。但是，这无济于事，因为反转过滤器会导致损失。接下来，我打赌将这些元素的颜色明确设置为 #780000 in dark.css。但是，仍然没有帮助。

我的问题是在所有这些反转+还原+色相变化之后，我怎样才能使 .child 的颜色准确#780000？

和

为什么child即使在将颜色显式设置为以下之后，颜色也不会改变（或设置为纯#780000）dark.css：

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
}

.child {
  background: #780000;
}

如何解决这个问题？

MWE（非基于 javascript）如下：

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
  background: green;
}

.child {
  background: #780000;
}

<div class="parent">
  I'm parent.
  <div class="child" style="background: #780000">
    I'm child.
  </div>
<div>

TOP 是我所期望的（也是没有过滤器的）。

BOTTOM 是我得到的（在Filter+Revert_Filteror之后Filter+Revert_Filter+Explicit_Coloring）。

标签： htmlcssfiltercolors