☰

护眼模式

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

目前为 2021-09-16 提交的版本。查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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