CSS过滤器从白色到自定义颜色，属性

Question

我有不同的 HTML 模板，我正在尝试从它们那里获得“黑暗模式”。 我通过向它们注入一些 css 来实现这一点。

@media (prefers-color-scheme: dark) {
   html {
       filter: invert(1) hue-rotate(.5turn);
   }

   img {
       filter: invert(1) hue-rotate(.5turn);
   }
}

有了这个，我的 html 完美地从白色转换为深色。我对此很满意。 问题是我的暗模式自定义颜色不是纯黑色。

因此，我尝试将浅色 html 转换为具有以下背景颜色的自定义深色模式：#333C4C。

我尝试了不同的计算器将 #FFFFFF 转换为我的自定义颜色，例如：

-webkit-filter: brightness(50%) sepia(1) hue-rotate(179.4deg) saturate(101.4%) brightness(101.4%);
filter: brightness(50%) sepia(1) hue-rotate(179.4deg) saturate(101.4%) brightness(101.4%)

问题是我的整个模板被一些浅蓝色模糊了，而我的初始代码只更改了白色背景和文本。

如何将我的浅色模式 html 转换为我的自定义深色模式？我认为初始代码是完美的，我只需要将其设为 #333C4C 而不是黑色。

---

更新图片：

Answer 1

滤镜无法将白色转换为深色。对于深色，你应该从黑色开始。

如你所说，如果你从white 开始，它会给你filter: invert(19%) sepia(28%) saturate(590%) hue-rotate(180deg) brightness(89%) contrast(84%);，它等于#9AB8D3。

但是如果你从black开始，它会给你完美的结果：filter: invert(20%) sepia(13%) saturate(1155%) hue-rotate(180deg) brightness(93%) contrast(87%);等于#333C4C

演示：

#I1, #I2{
  height:50px;
  width:50px;
}
#I1 {
  background: #fff;
  filter: invert(19%) sepia(28%) saturate(590%) hue-rotate(180deg) brightness(89%) contrast(84%);
}
#I2{
  background: #000;
  filter: invert(20%) sepia(13%) saturate(1155%) hue-rotate(180deg) brightness(93%) contrast(87%);
}

<div id="I1"></div>
<div id="I2"></div>

演示综合体：

body{
  margin:0;
  background-color: #333C4C;
  padding: 20px;
}
body > * :not(img){
  color:white;
  background: #000;
  filter: invert(20%) sepia(13%) saturate(1155%) hue-rotate(180deg) brightness(93%) contrast(87%);
}

<div id="I2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus tempus leo, eget fermentum ante aliquet hendrerit. Curabitur auctor in libero eget fringilla. Phasellus eleifend eu sem feugiat feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo libero ante, at maximus sem tincidunt ac. Fusce at ullamcorper purus. Nam lobortis, justo vel aliquam rutrum, augue nulla consectetur tellus, non eleifend ex orci id tortor. Donec at porta mauris. Vestibulum in magna ultrices, sodales nulla at, ultrices lacus. Pellentesque nec ante ac sem varius venenatis. Nam sit amet neque libero. Quisque ante augue, vestibulum id ex non, malesuada accumsan nisi. Quisque id aliquet urna, vitae volutpat tellus. Pellentesque nec neque at tortor facilisis auctor. Donec aliquet faucibus enim quis viverra. Nulla scelerisque vestibulum augue quis posuere.</p>
  <img src="https://dummyimage.com/400x400/fff/000">
</div>