被对象嘲讽，写个网页护眼宝你都不会么 （金石计划5天倒计时，速戳上图了解详情） 引言最近对象天天晚上加班看网页，眼睛一直不舒服，然后她就想下一个护眼包，让网页不那么亮。然后，她的电脑就就自动安装了很多软件，什么「小鸟壁纸、360 浏览器、金山毒霸、2345、鲁大师」...... ?再然后，她就生气的对我说，你不是开发网页的么，就不能给我开发个网页护眼工具么！ ?嗐，你还别说，我真会！ 网页主题快速切换原理网页护眼，不就是实现网页主题切换嘛！前几天，前端梦工厂[1]大佬分享了一篇文章[2]，就介绍了一种非常简单高效实现网页主题切换的效果。 它的原理非常简单，只需要一行代码就实现任意网页的主题切换 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…[3] ?借助油猴，我们能很轻松实现一个主题切换脚本 // ==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创建一个全局按钮，实现点击切换主题。 ?如果你对系统的油猴脚本开发感兴趣，参考我的小册 -油猴脚本实战开发指南[4] ?然而，对象对我开发的脚本并不满意，她嫌我的按钮在网页右下角，挡住了她操作网页。没办法，又给他修改了一版，按钮支持拖拽移动，而且在其他页面能同步更新按钮位置 ?当然，自动同步更新位置的功能是借助油猴 API 实现的，原生 JS 很难实现这个效果。 ?这一版主题切换工具，对象终于满意了！ 油猴脚本 YYDS! AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文