☰

夜间模式助手

实现任意网站的夜间模式，支持网站白名单

目前为 2022-03-23 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name              夜间模式助手
  3. // @namespace         https://github.com/syhyz1990/darkmode
  4. // @version           2.1.4
  5. // @icon              https://www.youxiaohou.com/darkmode.png
  6. // @description       实现任意网站的夜间模式，支持网站白名单
  7. // @author            YouXiaoHou
  8. // @license           MIT
  9. // @homepage          https://www.youxiaohou.com/tool/install-darkmode.html
  10. // @supportURL        https://github.com/syhyz1990/darkmode
  11. // @match             *://*/*
  12. // @require           https://unpkg.com/darkrule@latest/dist/rule.min.js
  13. // @require           https://unpkg.com/sweetalert2@10.16.6/dist/sweetalert2.min.js
  14. // @resource          swalStyle https://unpkg.com/sweetalert2@10.16.6/dist/sweetalert2.min.css
  15. // @run-at            document-start
  16. // @grant             GM_getValue
  17. // @grant             GM_setValue
  18. // @grant             GM_registerMenuCommand
  19. // @grant             GM_getResourceText
  20. // ==/UserScript==
  21.  
  22. ;(function () {
  23.     'use strict';
  24.  
  25.     let util = {
  26.         getValue(name) {
  27.             return GM_getValue(name);
  28.         },
  29.  
  30.         setValue(name, value) {
  31.             GM_setValue(name, value);
  32.         },
  33.  
  34.         addStyle(id, tag, css) {
  35.             tag = tag || 'style';
  36.             let doc = document, styleDom = doc.getElementById(id);
  37.             if (styleDom) return;
  38.             let style = doc.createElement(tag);
  39.             style.rel = 'stylesheet';
  40.             style.id = id;
  41.             tag === 'style' ? style.innerHTML = css : style.href = css;
  42.             doc.head.appendChild(style);
  43.         },
  44.  
  45.         addThemeColor(color) {
  46.             let doc = document, meta = doc.getElementsByName('theme-color')[0];
  47.             if (meta) return meta.setAttribute('content', color);
  48.             let metaEle = doc.createElement('meta');
  49.             metaEle.name = 'theme-color';
  50.             metaEle.content = color;
  51.             doc.head.appendChild(metaEle);
  52.         },
  53.  
  54.         getThemeColor() {
  55.             let meta = document.getElementsByName('theme-color')[0];
  56.             if (meta) {
  57.                 return meta.content;
  58.             }
  59.             return '#ffffff';
  60.         },
  61.  
  62.         removeElementById(eleId) {
  63.             let ele = document.getElementById(eleId);
  64.             ele && ele.parentNode.removeChild(ele);
  65.         },
  66.  
  67.         hasElementById(eleId) {
  68.             return document.getElementById(eleId);
  69.         },
  70.  
  71.         filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
  72.         reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
  73.         firefoxFilter: `filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="dark-mode-filter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0 0.925 -0.567 0.283 -0.567 0 0.925 -0.567 -0.567 0.283 0 0.925 0 0 0 1 0"/></filter></svg>#dark-mode-filter') !important;`,
  74.         firefoxReverseFilter: `filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="dark-mode-reverse-filter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0 1 -0.667 0.333 -0.667 0 1 -0.667 -0.667 0.333 0 1 0 0 0 1 0"/></filter></svg>#dark-mode-reverse-filter') !important;`,
  75.         noneFilter: '-webkit-filter: none !important; filter: none !important;',
  76.     };
  77.  
  78.     let main = {
  79.         /**
  80.          * 配置默认值
  81.          */
  82.         initValue() {
  83.             let value = [{
  84.                 name: 'dark_mode',
  85.                 value: 'light'
  86.             }, {
  87.                 name: 'button_position',
  88.                 value: 'left'
  89.             }, {
  90.                 name: 'button_size',
  91.                 value: 30
  92.             }, {
  93.                 name: 'exclude_list',
  94.                 value: ['youku.com', 'v.youku.com', 'www.douyu.com', 'www.iqiyi.com', 'vip.iqiyi.com', 'mail.qq.com', 'live.kuaishou.com']
  95.             }, {
  96.                 name: 'origin_theme_color',
  97.                 value: '#ffffff'
  98.             }];
  99.  
  100.             value.forEach((v) => {
  101.                 util.getValue(v.name) === undefined && util.setValue(v.name, v.value);
  102.             });
  103.         },
  104.  
  105.         addExtraStyle() {
  106.             try {
  107.                 return darkModeRule;
  108.             } catch (e) {
  109.                 return '';
  110.             }
  111.         },
  112.  
  113.         createDarkFilter() {
  114.             if (util.hasElementById('dark-mode-svg')) return;
  115.             let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0 0.925 -0.567 0.283 -0.567 0 0.925 -0.567 -0.567 0.283 0 0.925 0 0 0 1 0"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0 1 -0.667 0.333 -0.667 0 1 -0.667 -0.667 0.333 0 1 0 0 0 1 0"></feColorMatrix></filter></svg>';
  116.             let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
  117.             div.innerHTML = svgDom;
  118.             let frag = document.createDocumentFragment();
  119.             while (div.firstChild)
  120.                 frag.appendChild(div.firstChild);
  121.             document.head.appendChild(frag);
  122.         },
  123.  
  124.         createDarkStyle() {
  125.             util.addStyle('dark-mode-style', 'style', `
  126.                 @media screen {
  127.                     html {
  128.                         ${this.isFirefox() ? util.firefoxFilter : util.filter}
  129.                         scrollbar-color: #454a4d #202324;
  130.                     }
  131.             
  132.                     /* Default Reverse rule */
  133.                     img, 
  134.                     video, 
  135.                     iframe,
  136.                     canvas,
  137.                     :not(object):not(body) > embed,
  138.                     object,
  139.                     svg image,
  140.                     [style*="background:url"],
  141.                     [style*="background-image:url"],
  142.                     [style*="background: url"],
  143.                     [style*="background-image: url"],
  144.                     [background],
  145.                     twitterwidget,
  146.                     .sr-reader,
  147.                     .no-dark-mode,
  148.                     .sr-backdrop {
  149.                         ${this.isFirefox() ? util.firefoxReverseFilter : util.reverseFilter}
  150.                     }
  151.             
  152.                     [style*="background:url"] *,
  153.                     [style*="background-image:url"] *,
  154.                     [style*="background: url"] *,
  155.                     [style*="background-image: url"] *,
  156.                     input,
  157.                     [background] *,
  158.                     img[src^="https://s0.wp.com/latex.php"],
  159.                     twitterwidget .NaturalImage-image {
  160.                         ${util.noneFilter}
  161.                     }
  162.             
  163.                     /* Text contrast */
  164.                     html {
  165.                         text-shadow: 0 0 0 !important;
  166.                     }
  167.             
  168.                     /* Full screen */
  169.                     .no-filter,
  170.                     :-webkit-full-screen,
  171.                     :-webkit-full-screen *,
  172.                     :-moz-full-screen,
  173.                     :-moz-full-screen *,
  174.                     :fullscreen,
  175.                     :fullscreen * {
  176.                         ${util.noneFilter}
  177.                     }
  178.                     
  179.                     ::-webkit-scrollbar {
  180.                         background-color: #202324;
  181.                         color: #aba499;
  182.                     }
  183.                     ::-webkit-scrollbar-thumb {
  184.                         background-color: #454a4d;
  185.                     }
  186.                     ::-webkit-scrollbar-thumb:hover {
  187.                         background-color: #575e62;
  188.                     }
  189.                     ::-webkit-scrollbar-thumb:active {
  190.                         background-color: #484e51;
  191.                     }
  192.                     ::-webkit-scrollbar-corner {
  193.                         background-color: #181a1b;
  194.                     }
  195.             
  196.                     /* Page background */
  197.                     html {
  198.                         background: #fff !important;
  199.                     }
  200.                     
  201.                     ${this.addExtraStyle()}
  202.                 }
  203.             
  204.                 @media print {
  205.                     .no-print {
  206.                         display: none !important;
  207.                     }
  208.                 }`);
  209.         },
  210.  
  211.         setThemeColor() {
  212.             util.setValue('origin_theme_color', util.getThemeColor());
  213.         },
  214.  
  215.         enableDarkMode() {
  216.             if (this.isFullScreen()) return;
  217.             !this.isFirefox() && this.createDarkFilter();
  218.             this.createDarkStyle();
  219.             util.addThemeColor('#131313')
  220.         },
  221.  
  222.         disableDarkMode() {
  223.             util.removeElementById('dark-mode-svg');
  224.             util.removeElementById('dark-mode-style');
  225.             util.addThemeColor(util.getValue('origin_theme_color'))
  226.         },
  227.  
  228.         addButton() {
  229.             if (this.isTopWindow()) {
  230.                 let lightIcon = `<div style="background: #000;display: flex;align-items: center;justify-content: center;width: ${util.getValue('button_size')}px;height: ${util.getValue('button_size')}px;border-radius: 50%"><svg style="position: static;margin: 0;padding: 0;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${util.getValue('button_size') / 1.5}" height="${util.getValue('button_size') / 1.5}"><path d="M522.88 874.667A21.333 21.333 0 0 1 544.213 896v85.333a21.333 21.333 0 0 1-21.333 21.334h-21.333a21.333 21.333 0 0 1-21.334-21.334V896a21.333 21.333 0 0 1 21.334-21.333h21.333zm268.416-107.52l60.352 60.352a21.333 21.333 0 0 1 0 30.165l-15.083 15.083a21.333 21.333 0 0 1-30.186 0l-60.331-60.352a21.333 21.333 0 0 1 0-30.166l15.083-15.082a21.333 21.333 0 0 1 30.165 0zm-527.957 0l15.082 15.082a21.333 21.333 0 0 1 0 30.166l-60.352 60.352a21.333 21.333 0 0 1-30.165 0l-15.083-15.083a21.333 21.333 0 0 1 0-30.165l60.331-60.352a21.333 21.333 0 0 1 30.187 0zM512 277.333c141.376 0 256 114.624 256 256s-114.624 256-256 256-256-114.624-256-256 114.624-256 256-256zm0 64a192 192 0 1 0 0 384 192 192 0 0 0 0-384zm448.213 160a21.333 21.333 0 0 1 21.334 21.334V544a21.333 21.333 0 0 1-21.334 21.333H874.88A21.333 21.333 0 0 1 853.547 544v-21.333a21.333 21.333 0 0 1 21.333-21.334h85.333zm-810.666 0a21.333 21.333 0 0 1 21.333 21.334V544a21.333 21.333 0 0 1-21.333 21.333H64.213A21.333 21.333 0 0 1 42.88 544v-21.333a21.333 21.333 0 0 1 21.333-21.334h85.334zm687.04-307.413l15.082 15.083a21.333 21.333 0 0 1 0 30.165l-60.352 60.352a21.333 21.333 0 0 1-30.165 0l-15.083-15.083a21.333 21.333 0 0 1 0-30.165L806.4 193.92a21.333 21.333 0 0 1 30.187 0zm-618.496 0l60.352 60.352a21.333 21.333 0 0 1 0 30.165L263.36 299.52a21.333 21.333 0 0 1-30.187 0l-60.352-60.373a21.333 21.333 0 0 1 0-30.166l15.083-15.082a21.333 21.333 0 0 1 30.165 0zM522.9 64a21.333 21.333 0 0 1 21.334 21.333v85.334A21.333 21.333 0 0 1 522.9 192h-21.333a21.333 21.333 0 0 1-21.333-21.333V85.333A21.333 21.333 0 0 1 501.568 64h21.333z" fill="#fff"/></svg></div>`,
  231.                     darkIcon = `<div style="background: #333;display: flex;align-items: center;justify-content: center;width: ${util.getValue('button_size')}px;height: ${util.getValue('button_size')}px;border-radius: 50%"><svg style="position: static;margin: 0;padding: 0;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${util.getValue('button_size') / 1.5}" height="${util.getValue('button_size') / 1.5}"><path d="M513.173 128A255.061 255.061 0 0 0 448 298.667c0 141.376 114.624 256 256 256a255.36 255.36 0 0 0 189.803-84.203A392.855 392.855 0 0 1 896 512c0 212.075-171.925 384-384 384S128 724.075 128 512c0-209.707 168.107-380.16 376.96-383.936l8.192-.064zM395.35 213.93l-3.52 1.409C274.645 262.827 192 377.77 192 512c0 176.725 143.275 320 320 320 145.408 0 268.16-96.981 307.115-229.803l1.536-5.504-1.6.64a319.51 319.51 0 0 1-106.496 21.227l-8.555.107c-176.725 0-320-143.275-320-320 0-28.48 3.755-56.406 10.944-83.2l.405-1.536z" fill="#adbac7"/></svg></div>`;
  232.  
  233.                 let o = document.createElement('div'),
  234.                     buttonPostion = util.getValue('button_position');
  235.                 o.style.position = 'fixed';
  236.                 o.style[buttonPostion] = '25px';
  237.                 o.style.bottom = '25px';
  238.                 o.style.cursor = 'pointer';
  239.                 o.style.zIndex = '2147483999';
  240.                 o.style.userSelect = 'none';
  241.                 o.className = 'no-print';
  242.                 o.id = 'darkBtn';
  243.                 this.isDarkMode() ? o.innerHTML = lightIcon : o.innerHTML = darkIcon;
  244.                 document.body.appendChild(o);
  245.  
  246.                 o.addEventListener("click", () => {
  247.                     if (this.isDarkMode()) { //黑暗模式变为正常模式
  248.                         util.setValue('dark_mode', 'light');
  249.                         o.innerHTML = darkIcon;
  250.                         this.disableDarkMode();
  251.                     } else {
  252.                         util.setValue('dark_mode', 'dark');
  253.                         o.innerHTML = lightIcon;
  254.                         this.enableDarkMode();
  255.                     }
  256.                 });
  257.             }
  258.         },
  259.  
  260.         registerMenuCommand() {
  261.             if (this.isTopWindow()) {
  262.                 let whiteList = util.getValue('exclude_list');
  263.                 let host = location.host;
  264.                 if (whiteList.includes(host)) {
  265.                     GM_registerMenuCommand('💡 当前网站：❌', () => {
  266.                         let index = whiteList.indexOf(host);
  267.                         whiteList.splice(index, 1);
  268.                         util.setValue('exclude_list', whiteList);
  269.                         history.go(0);
  270.                     });
  271.                 } else {
  272.                     GM_registerMenuCommand('💡 当前网站：✔️', () => {
  273.                         whiteList.push(host);
  274.                         util.setValue('exclude_list', Array.from(new Set(whiteList)));
  275.                         history.go(0);
  276.                     });
  277.                 }
  278.  
  279.                 GM_registerMenuCommand('⚙️ 设置', () => {
  280.                     let style = `
  281.                                 .darkmode-popup { font-size: 14px !important; }
  282.                                 .darkmode-center { display: flex;align-items: center; }
  283.                                 .darkmode-setting-label { display: flex;align-items: center;justify-content: space-between;padding-top: 15px; }
  284.                                 .darkmode-setting-label-col { display: flex;align-items: flex-start;;padding-top: 15px;flex-direction:column }
  285.                                 .darkmode-setting-radio { width: 16px;height: 16px; }
  286.                                 .darkmode-setting-textarea { width: 100%; margin: 14px 0 0; height: 100px; resize: none; border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; color: #666; line-height: 1.2; }
  287.                                 .darkmode-setting-input { border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; width: 100px}
  288.                             `;
  289.                     util.addStyle('darkmode-style', 'style', style);
  290.                     util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle'));
  291.                     let excludeListStr = util.getValue('exclude_list').join('\n');
  292.  
  293.                     let dom = `<div style="font-size: 1em;">
  294.                               <label class="darkmode-setting-label">按钮位置 <div id="S-Dark-Position" class="darkmode-center"><input type="radio" name="buttonPosition" ${util.getValue('button_position') === 'left' ? 'checked' : ''} class="darkmode-setting-radio" value="left">左 <input type="radio" name="buttonPosition" style="margin-left: 30px;" ${util.getValue('button_position') === 'right' ? 'checked' : ''} class="darkmode-setting-radio" value="right">右</div></label>
  295.                               <label class="darkmode-setting-label"><span style="text-align: left;">按钮大小（默认：30）<small id="currentSize">当前：${util.getValue('button_size')}</small></span>
  296.                               <input id="S-Dark-Size" type="range" class="darkmode-setting-range" min="20" max="50" step="2" value="${util.getValue('button_size')}">
  297.                               </label>
  298.                               <label class="darkmode-setting-label-col">排除下列网址 <textarea placeholder="列表中的域名将不开启夜间模式，一行一个，例如：v.youku.com" id="S-Dark-Exclude" class="darkmode-setting-textarea">${excludeListStr}</textarea></label>
  299.                             </div>`;
  300.                     Swal.fire({
  301.                         title: '夜间模式配置',
  302.                         html: dom,
  303.                         icon: 'info',
  304.                         showCloseButton: true,
  305.                         confirmButtonText: '保存',
  306.                         footer: '<div style="text-align: center;font-size: 1em;">点击查看 <a href="https://www.youxiaohou.com/tool/install-darkmode.html" target="_blank">使用说明</a>，助手免费开源，Powered by <a href="https://www.youxiaohou.com">油小猴</a></div>',
  307.                         customClass: {
  308.                             popup: 'darkmode-popup',
  309.                         },
  310.                     }).then((res) => {
  311.                         res.isConfirmed && history.go(0);
  312.                     });
  313.  
  314.                     document.getElementById('S-Dark-Position').addEventListener('click', (e) => {
  315.                         e.target.tagName === "INPUT" && util.setValue('button_position', e.target.value);
  316.                     });
  317.                     document.getElementById('S-Dark-Size').addEventListener('change', (e) => {
  318.                         util.setValue('button_size', e.currentTarget.value);
  319.                         document.getElementById('currentSize').innerText = '当前：' + e.currentTarget.value;
  320.                     });
  321.                     document.getElementById('S-Dark-Exclude').addEventListener('change', (e) => {
  322.                         util.setValue('exclude_list', Array.from(new Set(e.currentTarget.value.split('\n').filter(Boolean))));
  323.                     });
  324.                 });
  325.             }
  326.         },
  327.  
  328.         isTopWindow() {
  329.             return window.self === window.top;
  330.         },
  331.  
  332.         addListener() {
  333.             document.addEventListener("fullscreenchange", (e) => {
  334.                 if (this.isFullScreen()) {
  335.                     //进入全屏
  336.                     this.disableDarkMode();
  337.                 } else {
  338.                     //退出全屏
  339.                     this.isDarkMode() && this.enableDarkMode();
  340.                 }
  341.             });
  342.         },
  343.  
  344.         isDarkMode() {
  345.             return util.getValue('dark_mode') === 'dark';
  346.         },
  347.  
  348.         isInExcludeList() {
  349.             return util.getValue('exclude_list').includes(location.host);
  350.         },
  351.  
  352.         isFullScreen() {
  353.             return document.fullscreenElement;
  354.         },
  355.  
  356.         isFirefox() {
  357.             return /Firefox/i.test(navigator.userAgent);
  358.         },
  359.  
  360.         firstEnableDarkMode() {
  361.             if (document.head) {
  362.                 this.isDarkMode() && this.enableDarkMode();
  363.             }
  364.             const headObserver = new MutationObserver(() => {
  365.                 this.isDarkMode() && this.enableDarkMode();
  366.             });
  367.             headObserver.observe(document.head, {childList: true, subtree: true});
  368.  
  369.             if (document.body) {
  370.                 this.addButton();
  371.             } else {
  372.                 const bodyObserver = new MutationObserver(() => {
  373.                     if (document.body) {
  374.                         bodyObserver.disconnect();
  375.                         this.addButton();
  376.                     }
  377.                 });
  378.                 bodyObserver.observe(document, {childList: true, subtree: true});
  379.             }
  380.         },
  381.  
  382.         init() {
  383.             this.initValue();
  384.             this.setThemeColor();
  385.             this.registerMenuCommand();
  386.             if (this.isInExcludeList()) return;
  387.             this.addListener();
  388.             this.firstEnableDarkMode();
  389.         }
  390.     };
  391.     main.init();
  392. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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