被对象嘲讽，写个网页护眼宝你都不会么

大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《油猴脚本实战指南》作者。

引言

最近对象天天晚上加班看网页，眼睛一直不舒服，然后她就想下一个护眼包，让网页不那么亮。然后，她的电脑就就自动安装了很多软件，什么小鸟壁纸、360浏览器、金山毒霸、2345、鲁大师......

再然后，她就生气的对我说，你不是开发网页的么，就不能给我开发个网页护眼工具么！

嗐，你还别说，我真会！

网页主题快速切换原理

网页护眼，不就是实现网页主题切换嘛！前几天，前端梦工厂大佬分享了一篇文章，就介绍了一种非常简单高效实现网页主题切换的效果。

它的原理非常简单，只需要一行代码就实现任意网页的主题切换

js 复制代码

html {
  filter: invert(1) hue-rotate(180deg);
}

CSS 的 filter（滤镜）属性可以为网页元素添加图像效果，例如模糊、反色或色调变化等。其中，filter: invert(1) hue-rotate(180deg) 是一组常用于暗黑模式的滤镜组合：

invert(1) 会将颜色进行反转，使亮色变暗；

hue-rotate(180deg) 调整颜色的色调，避免纯反色带来的不自然感。

结合这两个滤镜效果，我们可以快速实现整个网页的颜色切换，从而达到一键切换主题的目的。

但是，这个方法有一定瑕疵，图片和视频也会被整体反转造成色彩失真，但可以为 img 和 video 元素单独指定反向滤镜，使其颜色恢复正常

js 复制代码

/*图片、视频等元素不需要处理*/
img, 
video,
.logo,
.icon /*可继续添加可以不用处理的元素*/ {
  filter: invert(1) hue-rotate(180deg);
}

使用油猴脚本为任意网页增加主题切换按钮

要想上述的效果能快速应用到任意网站，我们必须要借助谷歌浏览器的一个插件---------油猴！它允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。

如果你对油猴不够了解，可以参考我的文章：juejin.cn/book/751468...

借助油猴，我们能很轻松实现一个主题切换脚本

js 复制代码

// ==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!