☰

护眼模式

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

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

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