link (opens new window)

javascript: (function () {
    // 获取了文档(document)的根元素(document.documentElement)的样式对象(style)
    const docStyle = document.documentElement.style;
    if (!window.modeIndex) {
        window.modeIndex = 0;
    }
    const styleList = [
        '',
        'invert(85%) hue-rotate(180deg)',
        'invert(100%) hue-rotate(180deg)',
    ];
    modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1;
    // 将对应的滤镜效果应用到文档根元素的样式中
    docStyle.filter = styleList[modeIndex];
    document.body
        .querySelectorAll('img, picture, video')
        .forEach(
            (el) =>
                (el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '')
        );
})();

说明:

这段 JavaScript 代码是一个自执行的函数, 用于切换页面的颜色模式。它会在页面加载时立即执行, 并将文档的根元素(document.documentElement)的样式 filter 属性设置为预定义的滤镜效果, 同时还会对页面中的图片、picture 和视频元素应用相应的滤镜效果以匹配颜色模式 更多滤镜知识: filter (opens new window)

具体来说, 这段代码做了以下事情:

• 定义了一个数组 styleList, 包含了不同的滤镜效果
• 切换颜色模式时, 更新 docStyle.filter 的值, 从而改变页面的颜色
• 对页面中的图片、picture 和视频元素应用相应的滤镜效果

需要注意的是, 这段代码通过控制 modeIndex 变量来切换不同的颜色模式, 并在页面加载时初始化 modeIndex 为 0。当切换到最后一个模式时, 会重新回到第一个模式, 形成循环切换效果

这段代码是一种实现颜色模式切换的简单方法, 但具体的滤镜效果和切换逻辑可以根据具体需求进行调整和扩展