全屏倒置亮度滤镜，用于深色主题浏览，但色调保持在 CSS

Question

我需要帮助来解决我的快速和肮脏的黑暗浏览 CSS 过滤器，它曾经很好地工作，但不再适用于大多数 google 页面，实际上是任何带有 div 的页面（我将其用作用户样式）。我绝不是程序员，只是一个患有严重光诱发偏头痛的用户，绝对需要深色主题的网页来拯救我的眼睛，所以我对 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 扩展的结果更好。它曾经完美无缺地工作，但最近发生了一些变化，任何带有 div 的页面，包括大多数 google 页面，都有大部分白色背景与过滤器仍然适用的黑暗部分交织在一起。我怀疑过滤器在这些部分应用了两次，因此将其恢复为白色。

非常感谢您的帮助。我很确定使用 html 选择器将其应用于整个页面不再是这样做的方法，但我对如何使其工作一无所知，请原谅我的无知并提前致谢。

Answer 1

我在 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;}

全屏倒置亮度滤镜，用于深色主题浏览，但色调保持在 CSS

Fullscreen inverted luminance filter for dark themed browsing but keeping hues in CSS

css

accessibility

userstyles