石小石Orz 大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《油猴脚本实战指南》作者。
引言
最近对象天天晚上加班看网页，眼睛一直不舒服，然后她就想下一个护眼包，让网页不那么亮。然后，她的电脑就就自动安装了很多软件，什么小鸟壁纸、360浏览器、金山毒霸、2345、鲁大师......
再然后，她就生气的对我说，你不是开发网页的么，就不能给我开发个网页护眼工具么！
嗐，你还别说，我真会！
网页主题快速切换原理
网页护眼，不就是实现网页主题切换嘛！前几天，前端梦工厂大佬分享了一篇文章，就介绍了一种非常简单高效实现网页主题切换的效果。
它的原理非常简单，只需要一行代码就实现任意网页的主题切换
html {
filter: invert(1) hue-rotate(180deg);
}
CSS 的
filter（滤镜）属性可以为网页元素添加图像效果，例如模糊、反色或色调变化等。其中，filter: invert(1) hue-rotate(180deg)是一组常用于暗黑模式的滤镜组合：
invert(1)会将颜色进行反转，使亮色变暗；hue-rotate(180deg)调整颜色的色调，避免纯反色带来的不自然感。
结合这两个滤镜效果，我们可以快速实现整个网页的颜色切换，从而达到一键切换主题的目的。
但是，这个方法有一定瑕疵，图片和视频也会被整体反转造成色彩失真，但可以为 img 和 video 元素单独指定反向滤镜，使其颜色恢复正常
/*图片、视频等元素不需要处理*/
img,
video,
.logo,
.icon /*可继续添加可以不用处理的元素*/ {
filter: invert(1) hue-rotate(180deg);
}
使用油猴脚本为任意网页增加主题切换按钮
要想上述的效果能快速应用到任意网站，我们必须要借助谷歌浏览器的一个插件———油猴！它允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。
如果你对油猴不够了解，可以参考我的文章：juejin.cn/book/751468…
借助油猴，我们能很轻松实现一个主题切换脚本
// ==UserScript==
// @name 一键暗黑换肤
// @namespace http://tampermonkey.net/
// @version 0.0.1
// @description 使用CSS滤镜快速切换网页为暗黑风格
// @author 石小石Orz
// @match *://*/*
// @grant GM_addStyle
// @grant GM_addElement
// ==/UserScript==
(function () {
'use strict';
// 注入样式，初始时不开启
GM_addStyle(`
html.dark-mode {
filter: invert(0.9) hue-rotate(180deg);
background: #111 !important;
}
html.dark-mode img, html.dark-mode video {
filter: invert(1) hue-rotate(180deg);
}
`);
// 添加切换按钮
const toggleBtn = GM_addElement(document.body,'button', {
textContent: '主题切换',
style: 'position:fixed;bottom:20px;right:20px;z-index:9999;padding:8px 12px;background:#444;color:white;border:none;border-radius:5px;cursor:pointer;',
});
// 点击切换模式并更新按钮文字
toggleBtn.addEventListener('click', () => {
const isDark = document.documentElement.classList.toggle('dark-mode');
});
})();
上述脚本非常简单，通过GM_addStyle向网页注入了全局样式、通过GM_addElement创建一个全局按钮，实现点击切换主题。
如果你对系统的油猴脚本开发感兴趣，参考我的小册-油猴脚本实战开发指南
然而，对象对我开发的脚本并不满意，她嫌我的按钮在网页右下角，挡住了她操作网页。没办法，又给他修改了一版，按钮支持拖拽移动，而且在其他页面能同步更新按钮位置
当然，自动同步更新位置的功能是借助油猴API实现的，原生JS很难实现这个效果。
这一版主题切换工具，对象终于满意了！
油猴脚本YYDS!
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)