全屏反转亮度滤镜用于暗色主题浏览，但保留CSS中的色调

Question

全屏反转亮度滤镜用于暗色主题浏览，但保留CSS中的色调

7

我需要帮助找到一个解决方案，以解决我的快速而简单的暗色浏览CSS过滤器，在大多数谷歌页面上不再起作用，实际上在任何包含divs的页面上都不起作用（我将其用作用户样式）。我绝不是程序员，只是一个患有严重光致性偏头痛的用户，绝对需要深色主题的网页来保护我的眼睛，因此我的CSS知识显然受限，抱歉 :/ 这是曾经有效的内容：

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

它曾经倒转页面上的所有颜色，然后将色调旋转180度以保持色调不变，因此结果是一个网页只有亮度倒转（蓝色仍为蓝色，橙色仍为橙色等等，只是更亮的文本和暗色背景上的强调）。然后我在图像和视频上反转了效果，以在最终结果中将它们从过滤器中排除。对我来说，结果看起来足够优雅，并且比大多数深色浏览Chrome扩展程序的结果要好。以前它可以完美无瑕地工作，但最近发生了一些变化，任何带有divs的页面，包括大多数谷歌页面，在过滤器仍然适用的暗色部分与大片白色背景纠缠在一起。我怀疑过滤器在这种情况下应用两次，因此将其恢复为白色。

非常感谢您的帮助。我相当确定使用html选择器将其应用于整个页面不再是解决方法，但我不知道如何使其工作，对我的无知表示歉意，并提前致谢。

- Vinicius Gonçalves

在对答案应用解决方案并进行一些实验后，我发现色相旋转滤镜在旋转两次180度后仍会留下一些颜色失真，一些颜色偏离了原本的位置，饱和度下降了约20％，但这并不足以让它变得无用。这个结果是出乎意料的，然而将100％的反转两次和色相旋转180度两次应该得到一个不变的图像，这可能是滤镜实现中的副作用，但我不确定。只是留下这个观察结果供参考。 - Vinicius Gonçalves

为了完整起见，在这个问题中，有一项广泛的研究，探讨了为什么使用CSS滤镜进行色调旋转两次会提供次优结果，与原始值非常不同：https://dev59.com/T2Ik5IYBdhLWcg3wiumk - Vinicius Gonçalves

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

我发现将黑色背景添加到 html 元素上可以获得相当不错的效果：

html {filter: invert(100%) hue-rotate(180deg);background:black}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}