Javascript 反转页面的颜色

我正在制作一个脚本来反转HTML页面的颜色。因此，在晚上更容易看到。我正在使用

filter:invert（100%）

来做这件事

以下是脚本：

document.body.style.filer = "invert(100%)";
Object.values(document.body.getElementsByTagName("*")).forEach(e => {
    e.style.filter = "invert(100%)"
});

然而，它并没有真正起作用

标题上的堆栈溢出徽标以及按钮都消失了。我做错了什么，还有比这更好的方法吗

提前感谢。

您的解决方案：

document.body.style.filer = "invert(100%)";
Object.values(document.body.getElementsByTagName("*")).forEach(e => {
    e.style.filter = "invert(100%)"
});

没有真正起作用，因为您正在反转父元素及其子元素的颜色。反转两次会使元素具有原始颜色。因此，您只需要反转父对象（在本例中为html，它是所有内容的根）的颜色：

每一种颜色都会颠倒。请注意，如果您尝试在无色元素上使用此脚本，则不会发生任何更改，即，如果您在此页面上尝试此脚本，您将注意到此页面左侧id为

左侧边栏

的

div将不会改变颜色。这是因为侧边栏没有任何颜色（中间部分和右侧侧边栏是倒置的，因为它们位于背景颜色为白色的
div#content
中）

但是，如果您将背景（例如白色）添加到左侧栏，它也会反转颜色。
这是否回答了您的问题？
document.querySelector('html').style.filter = 'invert(100%)'