为懒惰的人创建的CSS夜间模式

很多人花了很多时间想知道如何创建他们网站的轻量模式版本。别再浪费时间了！只需反转您的html标签。注意：可能会导致意想不到的颜色。

    /* Fjolt is dark by default, but you can change the class names */
    body.lightmode {
        filter: invert(1);
    }
    /* Firefox requires this line: */
    html.lightmode body {
        background: #efe9df;
    }

    if(document.getElementById('light-dark-mode') !== null) {
        document.getElementById('light-dark-mode').addEventListener('pointerdown', function(e) {
            let root = document.getElementsByTagName( 'html' )[0]
            if(root.classList.contains('lightmode')) {
                root.classList.remove('lightmode');
            } else {
                root.classList.add('lightmode');
            }
        });
    }

开个玩笑，这确实有效。有趣的是，Chrome 和 Firefox 似乎都首先反转了边框。在 Firefox 中，body 标签的背景不会反转，这意味着过滤器应用于正文内容，而不是 html 文档标签。这个小演示展示了很多关于不同渲染引擎如何工作的内容。

如果你对你的颜色很小心，你也许可以在某个地方完成这项工作。