☰

护眼模式

简单有效的全网通用护眼模式、夜间模式、暗黑模式

当前为 2021-08-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         护眼模式
  3. // @version      1.2.4
  4. // @author       X.I.U
  5. // @description  简单有效的全网通用护眼模式、夜间模式、暗黑模式
  6. // @match        *://*/*
  7. // @exclude      *://v.qq.com/*
  8. // @exclude      *://*.iqiyi.com/*
  9. // @exclude      *://*.youku.com/*
  10. // @exclude      *://*.mgtv.com/*
  11. // @exclude      *://tv.cctv.com/*
  12. // @icon         https://i.loli.net/2021/03/07/rdijeYm83pznxWq.png
  13. // @grant        GM_registerMenuCommand
  14. // @grant        GM_unregisterMenuCommand
  15. // @grant        GM_openInTab
  16. // @grant        GM_getValue
  17. // @grant        GM_setValue
  18. // @grant        GM_notification
  19. // @noframes
  20. // @license      GPL-3.0 License
  21. // @run-at       document-start
  22. // @namespace    https://github.com/XIU2/UserScript
  23. // @supportURL   https://github.com/XIU2/UserScript
  24. // @homepageURL  https://github.com/XIU2/UserScript
  25. // ==/UserScript==
  26.  
  27. (function() {
  28.     'use strict';
  29.     var menu_ALL = [
  30.         ['menu_disable', '✅ 已启用 (点击对当前网站禁用)', '❌ 已禁用 (点击对当前网站启用)', []],
  31.         ['menu_runDuringTheDay', '白天保持开启 (比晚上亮一点点)', '白天保持开启', true],
  32.         ['menu_autoRecognition', '智能排除自带暗黑模式的网页 (beta)', '智能排除自带暗黑模式的网页 (beta)', true],
  33.         ['menu_forcedToEnable', '✅ 已强制当前网站启用护眼模式 (👆)', '❌ 未强制当前网站启用护眼模式 (👆)', []],
  34.         ['menu_darkModeType', '点击切换模式', '点击切换模式', 1],
  35.         ['menu_customMode', '自定义当前模式', '自定义当前模式', true], ['menu_customMode1',,,'80|70'], ['menu_customMode2',,,'80|20|70|30'], ['menu_customMode3',,,'80']
  36.     ], menu_ID = [];
  37.     for (let i=0;i<menu_ALL.length;i++){ // 如果读取到的值为 null 就写入默认值
  38.         if (GM_getValue(menu_ALL[i][0]) == null){GM_setValue(menu_ALL[i][0], menu_ALL[i][3])};
  39.     }
  40.     registerMenuCommand();
  41.     if (menu_ID.length > 1) {addStyle();}
  42.  
  43.  
  44.     // 注册(不可用)脚本菜单
  45.     function registerMenuCommand() {
  46.         if (menu_ID.length > menu_ALL.length){ // 如果菜单ID数组多于菜单数组，说明不是首次添加菜单，需要卸载所有脚本菜单
  47.             for (let i=0;i<menu_ID.length;i++){
  48.                 GM_unregisterMenuCommand(menu_ID[i]);
  49.             }
  50.         }
  51.         for (let i=0;i<menu_ALL.length;i++){ // 循环注册(不可用)脚本菜单
  52.             menu_ALL[i][3] = GM_getValue(menu_ALL[i][0]);
  53.             if (menu_ALL[i][0] === 'menu_disable')
  54.             { // 启用/禁用护眼模式 (当前网站)
  55.                 if (menu_disable('check')) { // 当前网站是否已存在禁用列表中
  56.                     menu_ID[i] = GM_registerMenuCommand(`${menu_ALL[i][2]}`, function(){menu_disable('del')});
  57.                     return
  58.                 } else {
  59.                     menu_ID[i] = GM_registerMenuCommand(`${menu_ALL[i][1]}`, function(){menu_disable('add')});
  60.                 }
  61.             }
  62.             else if (menu_ALL[i][0] === 'menu_darkModeType')
  63.             { // 点击切换模式
  64.                 if (menu_ALL[i][3] > 3) { // 避免在减少 raw 数组后，用户储存的数据大于数组而报错
  65.                     menu_ALL[i][3] = 1;
  66.                     GM_setValue(menu_ALL[i][0], menu_ALL[i][3]);
  67.                 }
  68.                 menu_ID[i] = GM_registerMenuCommand(`${menu_num(menu_ALL[i][3])} ${menu_ALL[i][1]}`, function(){menu_toggle(`${menu_ALL[i][3]}`,`${menu_ALL[i][0]}`)});
  69.             }
  70.             else if (menu_ALL[i][0] === 'menu_customMode')
  71.             { // 自定义当前模式
  72.                 GM_setValue(menu_ALL[i][0], menu_ALL[i][3]);
  73.                 menu_ID[i] = GM_registerMenuCommand(`#️⃣ ${menu_ALL[i][1]}`, function(){menu_customMode()});
  74.             }
  75.             else if (menu_ALL[i][0] === 'menu_customMode1' || menu_ALL[i][0] === 'menu_customMode2' || menu_ALL[i][0] === 'menu_customMode3')
  76.             { // 当前模式值
  77.                 GM_setValue(menu_ALL[i][0], menu_ALL[i][3]);
  78.             }
  79.             else if (menu_ALL[i][0] === 'menu_forcedToEnable')
  80.             { // 强制当前网站启用护眼模式
  81.                 if (menu_value('menu_autoRecognition')) { // 自动排除自带暗黑模式的网页 (beta)
  82.                     if (menu_forcedToEnable('check')) { // 当前网站是否已存在列表中
  83.                         menu_ID[i] = GM_registerMenuCommand(`${menu_ALL[i][1]}`, function(){menu_forcedToEnable('del')});
  84.                     } else {
  85.                         menu_ID[i] = GM_registerMenuCommand(`${menu_ALL[i][2]}`, function(){menu_forcedToEnable('add')});
  86.                     }
  87.                 }
  88.             }
  89.             else
  90.             {
  91.                 menu_ID[i] = GM_registerMenuCommand(`${menu_ALL[i][3]?'✅':'❌'} ${menu_ALL[i][1]}`, function(){menu_switch(`${menu_ALL[i][3]}`,`${menu_ALL[i][0]}`,`${menu_ALL[i][2]}`)});
  92.             }
  93.         }
  94.         menu_ID[menu_ID.length] = GM_registerMenuCommand('💬 反馈 & 建议', function () {window.GM_openInTab('https://github.com/XIU2/UserScript#xiu2userscript', {active: true,insert: true,setParent: true});window.GM_openInTab('https://gf.qytechs.cn/zh-CN/scripts/412212/feedback', {active: true,insert: true,setParent: true});});
  95.     }
  96.  
  97.  
  98.     // 菜单数字图标
  99.     function menu_num(num) {
  100.         return ['0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟'][num]
  101.     }
  102.  
  103.  
  104.     // 自定义当前模式
  105.     function menu_customMode() {
  106.         let newMods, tip, defaults, name;
  107.         switch(menu_value('menu_darkModeType')) {
  108.             case 1:
  109.                 tip = '自定义 [模式 1]，修改后立即生效 (部分网页可能需要刷新)~\n格式：亮度 (白天)|亮度 (晚上)\n默认：80|70（均为百分比 1~100，不需要 % 符号）';
  110.                 defaults = '80|70';
  111.                 name = 'menu_customMode1';
  112.                 break;
  113.             case 2:
  114.                 tip = '自定义 [模式 2]，修改后立即生效 (部分网页可能需要刷新)~\n格式：亮度 (白天)|暖色 (白天)|亮度 (晚上)|暖色 (晚上)\n默认：80|20|70|30（均为百分比 1~100，不需要 % 符号）';
  115.                 defaults = '80|20|70|30';
  116.                 name = 'menu_customMode2';
  117.                 break;
  118.             case 3:
  119.                 tip = '自定义 [模式 3]，修改后立即生效 (部分网页可能需要刷新)~\n格式：反色\n默认：80（均为百分比 50~100，不需要 % 符号）';
  120.                 defaults = '80';
  121.                 name = 'menu_customMode3';
  122.                 break;
  123.         }
  124.         newMods = prompt(tip, GM_getValue(`${name}`));
  125.         if (newMods === '') {
  126.             GM_setValue(`${name}`, defaults);
  127.             registerMenuCommand(); // 重新注册(不可用)脚本菜单
  128.         } else if (newMods != null) {
  129.             GM_setValue(`${name}`, newMods);
  130.             registerMenuCommand(); // 重新注册(不可用)脚本菜单
  131.         }
  132.         if (document.getElementById('XIU2DarkMode')) {
  133.             document.getElementById('XIU2DarkMode').remove(); // 即时修改样式
  134.             addStyle();
  135.         }
  136.     }
  137.  
  138.  
  139.     // 强制当前网站启用护眼模式
  140.     function menu_forcedToEnable(type) {
  141.         switch(type) {
  142.             case 'check':
  143.                 if(check()) return true
  144.                 return false
  145.                 break;
  146.             case 'add':
  147.                 add();
  148.                 break;
  149.             case 'del':
  150.                 del();
  151.                 break;
  152.         }
  153.  
  154.         function check() { // 存在返回真，不存在返回假
  155.             let websiteList = menu_value('menu_forcedToEnable'); // 读取网站列表
  156.             if (websiteList.indexOf(location.host) === -1) return false // 不存在返回假
  157.             return true
  158.         }
  159.  
  160.         function add() {
  161.             if (check()) return
  162.             let websiteList = menu_value('menu_forcedToEnable'); // 读取网站列表
  163.             websiteList.push(location.host); // 追加网站域名
  164.             GM_setValue('menu_forcedToEnable', websiteList); // 写入配置
  165.             location.reload(); // 刷新网页
  166.         }
  167.  
  168.         function del() {
  169.             if (!check()) return
  170.             let websiteList = menu_value('menu_forcedToEnable'), // 读取网站列表
  171.             index = websiteList.indexOf(location.host);
  172.             websiteList.splice(index, 1); // 删除网站域名
  173.             GM_setValue('menu_forcedToEnable', websiteList); // 写入配置
  174.             location.reload(); // 刷新网页
  175.         }
  176.     }
  177.  
  178.  
  179.     // 启用/禁用护眼模式 (当前网站)
  180.     function menu_disable(type) {
  181.         switch(type) {
  182.             case 'check':
  183.                 if(check()) return true
  184.                 return false
  185.                 break;
  186.             case 'add':
  187.                 add();
  188.                 break;
  189.             case 'del':
  190.                 del();
  191.                 break;
  192.         }
  193.  
  194.         function check() { // 存在返回真，不存在返回假
  195.             let websiteList = menu_value('menu_disable'); // 读取网站列表
  196.             if (websiteList.indexOf(location.host) === -1) return false // 不存在返回假
  197.             return true
  198.         }
  199.  
  200.         function add() {
  201.             if (check()) return
  202.             let websiteList = menu_value('menu_disable'); // 读取网站列表
  203.             websiteList.push(location.host); // 追加网站域名
  204.             GM_setValue('menu_disable', websiteList); // 写入配置
  205.             location.reload(); // 刷新网页
  206.         }
  207.  
  208.         function del() {
  209.             if (!check()) return
  210.             let websiteList = menu_value('menu_disable'), // 读取网站列表
  211.             index = websiteList.indexOf(location.host);
  212.             websiteList.splice(index, 1); // 删除网站域名
  213.             GM_setValue('menu_disable', websiteList); // 写入配置
  214.             location.reload(); // 刷新网页
  215.         }
  216.     }
  217.  
  218.  
  219.     // 切换暗黑模式
  220.     function menu_toggle(menu_status, Name) {
  221.         menu_status = parseInt(menu_status)
  222.         if (menu_status >= 3){
  223.             menu_status = 1;
  224.         } else {
  225.             menu_status += 1;
  226.         }
  227.         GM_setValue(`${Name}`, menu_status);
  228.         location.reload(); // 刷新网页
  229.     };
  230.  
  231.  
  232.     // 菜单开关
  233.     function menu_switch(menu_status, Name, Tips) {
  234.         if (menu_status == 'true'){
  235.             GM_setValue(`${Name}`, false);
  236.             GM_notification({text: `已关闭 [${Tips}] 功能\n（刷新网页后生效）`, timeout: 3500});
  237.         }else{
  238.             GM_setValue(`${Name}`, true);
  239.             GM_notification({text: `已开启 [${Tips}] 功能\n（刷新网页后生效）`, timeout: 3500});
  240.         }
  241.         if (Name === 'menu_autoRecognition') {
  242.             location.reload(); // 刷新网页
  243.         }
  244.         registerMenuCommand(); // 重新注册(不可用)脚本菜单
  245.     };
  246.  
  247.  
  248.     // 返回菜单值
  249.     function menu_value(menuName) {
  250.         for (let menu of menu_ALL) {
  251.             if (menu[0] == menuName) {
  252.                 return menu[3]
  253.             }
  254.         }
  255.     }
  256.  
  257.  
  258.     // 添加样式
  259.     function addStyle() {
  260.         let remove = false, style_Add = document.createElement('style'),
  261.             hours = new Date().getHours(),
  262.             style_10 = menu_value('menu_customMode1').split('|'),
  263.             style_20 = menu_value('menu_customMode2').split('|'),
  264.             style_30 = menu_value('menu_customMode3').split('|'),
  265.             style = ``,
  266.             style_00 = `html, body {background-color: #ffffff;}`,
  267.             style_11 = `html {filter: brightness(${style_10[0]}%) !important;}`,
  268.             style_11_firefox = `html {filter: brightness(${style_10[0]}%) !important; background-image: url();}`,
  269.             style_12 = `html {filter: brightness(${style_10[1]}%) !important;}`,
  270.             style_12_firefox = `html {filter: brightness(${style_10[1]}%) !important; background-image: url();}`,
  271.             style_21 = `html {filter: brightness(${style_20[0]}%) sepia(${style_20[1]}%) !important;}`,
  272.             style_21_firefox = `html {filter: brightness(${style_20[0]}%) sepia(${style_20[1]}%) !important; background-image: url();}`,
  273.             style_22 = `html {filter: brightness(${style_20[2]}%) sepia(${style_20[3]}%) !important;}`,
  274.             style_22_firefox = `html {filter: brightness(${style_20[2]}%) sepia(${style_20[3]}%) !important; background-image: url();}`,
  275.             style_31 = `html {filter: invert(${style_30[0]}%) !important;} img, video {filter: invert(1) !important;}.mode-fullscreen video, img[alt="[公式]"] {filter: none !important;}`,
  276.             style_31_firefox = `html {filter: invert(${style_30[0]}%) !important; background-image: url();} img, video {filter: invert(1) !important;} .mode-fullscreen video, img[alt="[公式]"] {filter: none !important;}`;
  277.  
  278.         // Firefox 浏览器需要特殊对待
  279.         if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
  280.             style_11 = style_11_firefox
  281.             style_12 = style_12_firefox
  282.             style_21 = style_21_firefox
  283.             style_22 = style_22_firefox
  284.             style_31 = style_31_firefox
  285.         }
  286.  
  287.         // 白天（7点到19点）
  288.         if (hours > 6 && hours < 19) {
  289.             if (menu_value('menu_runDuringTheDay')) {
  290.                 style_12 = style_11
  291.                 style_22 = style_21
  292.             } else {
  293.                 style_12 = style_22 = ''
  294.             }
  295.         }
  296.  
  297.         switch(menu_value('menu_darkModeType')) {
  298.             case 1:
  299.                 style += style_12;
  300.                 break;
  301.             case 2:
  302.                 style += style_22;
  303.                 break;
  304.             case 3:
  305.                 style += style_31;
  306.                 break;
  307.         }
  308.         style_Add.id = 'XIU2DarkMode';
  309.         style_Add.type = 'text/css';
  310.         //console.log(document,document.lastChild,document.querySelector('html'))
  311.         if (document.lastChild) {
  312.             document.lastChild.appendChild(style_Add).textContent = style;
  313.         } else { // 发现个别网站速度太慢的话，就会出现脚本运行太早，连 html 标签都还没加载。。。
  314.             let timer1 = setInterval(function(){ // 每 5 毫秒检查一下 html 是否已存在
  315.                 if (document.lastChild) {
  316.                     clearInterval(timer1); // 取消定时器
  317.                     document.lastChild.appendChild(style_Add).textContent = style;
  318.                 }
  319.             });
  320.         }
  321.  
  322.         let websiteList = [];
  323.         if (menu_value('menu_autoRecognition')) { // 智能排除自带暗黑模式的网页 (beta)
  324.             websiteList = menu_value('menu_forcedToEnable'); // 强制当前网站启用护眼模式
  325.         }
  326.  
  327.         // 为了避免 body 还没加载导致无法检查是否设置背景颜色
  328.         let timer = setInterval(function(){ // 每 5 毫秒检查一下 body 是否已存在
  329.             if (document.body) {
  330.                 clearInterval(timer); // 取消定时器（每 10 毫秒一次的）
  331.                 setTimeout(function(){ // 为了避免太快 body 的 CSS 还没加载上，先延迟 150 毫秒（缺点就是可能会出现短暂一闪而过的暗黑滤镜）
  332.                     console.log('html:', window.getComputedStyle(document.lastChild).backgroundColor, 'body:', window.getComputedStyle(document.body).backgroundColor)
  333.                     if (window.getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)' && window.getComputedStyle(document.lastChild).backgroundColor === 'rgba(0, 0, 0, 0)') {
  334.                         // 如果 body 没有 CSS 背景颜色，那就需要添加一个背景颜色，否则影响滤镜效果
  335.                         let style_Add2 = document.createElement('style');
  336.                         style_Add2.id = 'XIU2DarkMode2';
  337.                         document.lastChild.appendChild(style_Add2).textContent = style_00;
  338.                     } else if (window.getComputedStyle(document.body).backgroundColor === 'rgb(0, 0, 0)' || getColorValue(document.body) > 0 && getColorValue(document.body) < 898989 || getColorValue(document.lastChild) > 0 && getColorValue(document.lastChild) < 898989 || window.getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)' && window.getComputedStyle(document.lastChild).backgroundColor === 'rgb(0, 0, 0)') {
  339.                         // 如果是黑色 (等于0,0,0) 或深色 (小于 89,89,89)，就停用本脚本滤镜
  340.                         if (menu_value('menu_autoRecognition')) { // 排除自带暗黑模式的网页 (beta)
  341.                             for (let i=0;i<websiteList.length;i++){ // 这些网站强制启用护眼模式滤镜
  342.                                 if (websiteList[i] === location.host) return
  343.                             }
  344.                             console.log('检测到当前网页自带暗黑模式，停用本脚本滤镜...')
  345.                             document.getElementById('XIU2DarkMode').remove();
  346.                             remove = true;
  347.                         }
  348.                     }
  349.                 }, 150);
  350.  
  351.                 // 用来解决一些 CSS 加载缓慢的网站，可能会出现没有正确排除的问题，在没有找到更好的办法之前，先这样凑活着用
  352.                 setTimeout(function(){
  353.                     console.log('html:', window.getComputedStyle(document.lastChild).backgroundColor, 'body:', window.getComputedStyle(document.body).backgroundColor)
  354.                     if (window.getComputedStyle(document.body).backgroundColor === 'rgb(0, 0, 0)' || getColorValue(document.body) > 0 && getColorValue(document.body) < 898989 || getColorValue(document.lastChild) > 0 && getColorValue(document.lastChild) < 898989 || window.getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)' && window.getComputedStyle(document.lastChild).backgroundColor === 'rgb(0, 0, 0)') {
  355.                         // 如果是黑色 (等于0,0,0) 或深色 (小于 89,89,89)，就停用本脚本滤镜
  356.                         if (menu_value('menu_autoRecognition')) { // 排除自带暗黑模式的网页 (beta)
  357.                             for (let i=0;i<websiteList.length;i++){ // 这些网站强制启用护眼模式滤镜
  358.                                 if (websiteList[i] === location.host) return
  359.                             }
  360.                             if (remove) return
  361.                             console.log('检测到当前网页自带暗黑模式，停用本脚本滤镜...')
  362.                             if (document.getElementById('XIU2DarkMode')) document.getElementById('XIU2DarkMode').remove();
  363.                             if (document.getElementById('XIU2DarkMode2')) document.getElementById('XIU2DarkMode2').remove();
  364.                         }
  365.                     }
  366.                 }, 1500);
  367.             }
  368.         });
  369.  
  370.         // 用来解决一些 CSS 加载缓慢的网站，可能会出现没有正确排除的问题，在没有找到更好的办法之前，先这样凑活着用
  371.         /*setTimeout(function(){
  372.             console.log('html:', window.getComputedStyle(document.lastChild).backgroundColor, 'body:', window.getComputedStyle(document.body).backgroundColor)
  373.             if (window.getComputedStyle(document.body).backgroundColor === 'rgb(0, 0, 0)' || getColorValue(document.body) > 0 && getColorValue(document.body) < 898989 || getColorValue(document.lastChild) > 0 && getColorValue(document.lastChild) < 898989) {
  374.                 // 如果是黑色 (等于0,0,0) 或深色 (小于 89,89,89)，就停用本脚本滤镜
  375.                 if (menu_value('menu_autoRecognition')) { // 排除自带暗黑模式的网页 (beta)
  376.                     for (let i=0;i<websiteList.length;i++){ // 这些网站强制启用护眼模式滤镜
  377.                         if (websiteList[i] === location.host) return
  378.                     }
  379.                     if (remove) return
  380.                     console.log('检测到当前网页自带暗黑模式，停用本脚本滤镜...')
  381.                     if (document.getElementById('XIU2DarkMode')) document.getElementById('XIU2DarkMode').remove();
  382.                     if (document.getElementById('XIU2DarkMode2')) document.getElementById('XIU2DarkMode2').remove();
  383.                 }
  384.             }
  385.         }, 3000);*/
  386.  
  387.         // 解决远景论坛会清理掉前面插入的 CSS 样式的问题
  388.         if (location.hostname === 'bbs.pcbeta.com') {
  389.             let timer1 = setInterval(function(){
  390.                 if (!document.getElementById('XIU2DarkMode')) {
  391.                     document.lastChild.appendChild(style_Add).textContent = style;
  392.                     clearInterval(timer1);
  393.                 }
  394.             });
  395.         }
  396.     }
  397.  
  398.     // 获取背景颜色值
  399.     function getColorValue(e) {
  400.         let rgbValueArry = window.getComputedStyle(e).backgroundColor.replace(/rgba|rgb|\(|\)| /g, '').split (',')
  401.         return parseInt(rgbValueArry[0] + rgbValueArry[1] + rgbValueArry[2])
  402.     }
  403. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址