☰

智能暗黑模式

它只會將明亮的網站變為黑暗。

目前為 2022-06-30 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name:ko           스마트 다크 모드
  3. // @name              Smart Dark Mode
  4. // @name:ru           Умный темный режим
  5. // @name:ja           スマートダークモード
  6. // @name:zh-TW        智能暗黑模式
  7. // @name:zh-CN        智能暗黑模式
  8.  
  9. // @description:ko    밝은 색의 웹 사이트들만 어둡게 만듭니다.
  10. // @description       Turn only bright websites to dark.
  11. // @description:ru    Делайте темными только яркие сайты.
  12. // @description:ja    明るいウェブサイトだけを暗くします。
  13. // @description:zh-TW 它只會將明亮的網站變為黑暗。
  14. // @description:zh-CN 它只会将明亮的网站变为黑暗。
  15.  
  16. // @namespace         https://ndaesik.tistory.com/
  17. // @version           2022.06.30.10.20
  18. // @author            ndaesik
  19. // @icon              https://lh3.googleusercontent.com/81tKJiCnAHzX1YojaGl1h33INWH-PcMN7S1N5eaTf4aUyO5Y7iKJ4cTI8JcZL55iP4bbWyFsJWfFrX4Doe-KaXaI0g
  20. // @match             *://*/*
  21.  
  22. // @grant             GM.getValue
  23. // @grant             GM.setValue
  24. // @grant             GM_registerMenuCommand
  25. // @run-at            document-start
  26. // ==/UserScript==
  27.  
  28. // prevent blink
  29. if (self == top) {
  30.     let preventBlinkCSS = document.createElement('style')
  31.     preventBlinkCSS.innerText = `* {background:#202124!important; border-color:#3c4043!important; color-scheme:dark!important; color:#bdc1c6!important}`
  32.     preventBlinkCSS.classList.add('preventBlinkCSS')
  33.     document.head?.appendChild(preventBlinkCSS)
  34. }
  35.  
  36. // main.js
  37. window.addEventListener('load', _ => {
  38. (async _ => {
  39. let alwaysOnList = await GM.getValue('alwaysOnList', '');
  40. let alwaysOffList = await GM.getValue('alwaysOffList', 'youtube.com/live_chat?');
  41. let checkUrlExist = list => { return (list.replaceAll(/\s/g,'').split(/[\r\n]+|,/g) != '' && list.replaceAll(/\s/g,'').split(/[\r\n]+|,/g).filter(a => window.document.URL.indexOf(a) > -1).length > 0) ? true : false }
  42. let saveTextarea = _ => {
  43.         GM.setValue('alwaysOnList', document.querySelector('#GDM_on_textarea').value.replace(/^, ?/, ''));
  44.         GM.setValue('alwaysOffList', document.querySelector('#GDM_off_textarea').value.replace(/^, ?/, ''));
  45.     }
  46. let toggleOption = _ => {
  47.         let e = document.querySelector('#GDM_body');
  48.         if (e.style.display == 'none') {
  49.             e.style.display = 'block';
  50.         } else {
  51.             e.style.display = 'none';
  52.             saveTextarea()
  53.         }
  54.     }
  55. let applyFilter = _ => document.head.appendChild(drkMo);
  56. let toggleFilter = _ => {
  57.         if (document.querySelector('style.drkMo') == null) {
  58.             applyFilter();
  59.             document.querySelector('#GDM_toggle').checked = true;
  60.         } else {
  61.             document.querySelectorAll('style.drkMo').forEach(e => e.remove());
  62.             document.querySelector('#GDM_toggle').checked = false;
  63.         }
  64.     }
  65.  
  66. // add option div in DOM
  67. document.body.insertAdjacentHTML('beforeend', `
  68. <div id="GDM_body" style="display: none">
  69.     <div id="GDM_header">
  70.         <input id="GDM_about_tab_button" type="radio" name="GDM_tab_toggle" checked>
  71.         <label for="GDM_about_tab_button">
  72.             <svg viewBox="0 0 512 512">
  73.                 <path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"></path>
  74.             </svg>
  75.         </label>
  76.         <div id="GDM_right_side">
  77.             <a id="GDM_add_page" class="GDM_header_buttons">
  78.                 <svg viewBox="0 0 500 500">
  79.                     <path fill="currentColor" d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path>
  80.                 </svg>
  81.             </a>
  82.             <input id="GDM_toggle" type="checkbox">
  83.             <label for="GDM_toggle" class="GDM_header_buttons">
  84.                 <svg class="GDM_off" viewBox="0 0 576 512">
  85.                     <path fill="currentColor" d="M192 352C138.1 352 96 309 96 256C96 202.1 138.1 160 192 160C245 160 288 202.1 288 256C288 309 245 352 192 352zM384 448H192C85.96 448 0 362 0 256C0 149.1 85.96 64 192 64H384C490 64 576 149.1 576 256C576 362 490 448 384 448zM384 128H192C121.3 128 64 185.3 64 256C64 326.7 121.3 384 192 384H384C454.7 384 512 326.7 512 256C512 185.3 454.7 128 384 128z"></path>
  86.                 </svg>
  87.                 <svg class="GDM_on" viewBox="0 0 576 512">
  88.                     <path fill="currentColor" d="M384 64C490 64 576 149.1 576 256C576 362 490 448 384 448H192C85.96 448 0 362 0 256C0 149.1 85.96 64 192 64H384zM384 352C437 352 480 309 480 256C480 202.1 437 160 384 160C330.1 160 288 202.1 288 256C288 309 330.1 352 384 352z"></path>
  89.                 </svg>
  90.             </label>
  91.             <a id="GDM_close_window" class="GDM_header_buttons">
  92.                 <svg viewBox="0 0 500 500">
  93.                     <path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path>
  94.                 </svg>
  95.             </a>
  96.         </div>
  97.     </div>
  98.     <input id="GDM_on_tab_button" type="radio" name="GDM_tab_toggle"><label for="GDM_on_tab_button">On</label>
  99.     <input id="GDM_off_tab_button" type="radio" name="GDM_tab_toggle"><label for="GDM_off_tab_button">Off</label>
  100.     <div id="GDM_main">
  101.         <textarea id="GDM_on_textarea" spellcheck="false" placeholder="example.com,\nlotemipsum.com">${alwaysOnList}</textarea>
  102.         <textarea id="GDM_off_textarea" spellcheck="false" placeholder="example.com,\nlotemipsum.com">${alwaysOffList}</textarea>
  103.         <div id="GDM_about_tab"></div>
  104.     </div>
  105. </div>
  106.  
  107. <style>
  108. #GDM_body {background-color: #171717!important; height: 430px!important; position: fixed!important; top: 25px!important; right: 25px!important; width: 316px!important; z-index: 2147483647!important; box-shadow: 0 -1px 2px 0 rgb(0 0 0 / 30%), 0 -2px 6px 2px rgb(0 0 0 / 15%)!important; user-select: none!important;}
  109. #GDM_body :not(#GDM_all) {color:#bdc1c6!important;}
  110. #GDM_body :is(div, textarea, input, label) {all: initial;}
  111. #GDM_body [type="radio"],
  112. #GDM_body [type="checkbox"] {visibility: hidden!important; width: 0!important; position: absolute!important;}
  113.  
  114. #GDM_header {display: block!important; width: 100%!important; height: 34px!important; padding-top: 10px!important;}
  115. #GDM_header svg {width: 16px!important;}
  116. #GDM_header #GDM_toggle + label svg,
  117. #GDM_header #GDM_about_tab_button svg {width: 19px!important;}
  118. #GDM_header #GDM_toggle + label svg {display: none!important;}
  119. #GDM_header #GDM_toggle:not(:checked) + label svg.GDM_off,
  120. #GDM_header #GDM_toggle:checked + label svg.GDM_on {display: inline!important;}
  121. #GDM_header #GDM_toggle + label svg.GDM_on path,
  122. #GDM_header svg:hover path,
  123. #GDM_header input:checked + label path {fill: orange!important;}
  124. #GDM_header > #GDM_about_tab_button + label {float: left!important; padding-left: 15px!important;}
  125. #GDM_header > #GDM_about_tab_button:checked ~ #GDM_right_side #GDM_add_page {pointer-events: none!important; opacity: 0.3!important;}
  126. #GDM_header > #GDM_right_side {float: right!important; padding-right: 15px!important;}
  127. #GDM_header > #GDM_right_side .GDM_header_buttons {padding-left: 15px!important; line-height: 15px!important; height: 15px!important; text-decoration: none!important;}
  128. #GDM_header ~ label {float:left!important; font-weight: bold!important; opacity: .3!important; height: 34px!important; line-height:34px!important; width: 50%!important; display: inline-block!important; vertical-align:top!important; user-select: none!important; text-align: center!important; border-bottom: 2px transparent solid!important;}
  129. #GDM_header ~ label:hover {opacity: 1!important;}
  130. #GDM_header ~ input:checked + label {opacity: 1!important; border-color: orange!important;}
  131.  
  132. #GDM_main {box-shadow: inset 0 7px 9px -7px rgba(0,0,0,.4)!important; background-color: #202124!important;}
  133. #GDM_main > :not(#GDM_all) {background-color: transparent!important; height: 328px!important; font-size: 14px!important; padding: 12px!important; max-width: calc(316px - 24px)!important; min-width: calc(316px - 24px)!important; width: calc(316px - 24px)!important; border:0!important;}
  134. #GDM_main > textarea {outline: none!important; resize: none!important; color-scheme: dark!important}
  135. #GDM_main > textarea::placeholder {color: #bdc1c6!important; opacity:0.3!important; font-weight: normal!important;}
  136. #GDM_main > textarea, :is(#GDM_on_tab_button,#GDM_off_tab_button):checked ~ #GDM_main #GDM_about_tab {display: none!important;}
  137. #GDM_main > #GDM_about_tab {display: block!important; white-space: pre-line!important;}
  138. #GDM_on_tab_button:checked ~ #GDM_main #GDM_on_textarea,
  139. #GDM_off_tab_button:checked ~ #GDM_main #GDM_off_textarea {display: block!important;}
  140. </style>
  141. `)
  142.  
  143. // color inverter CSS
  144. let drkMo = document.createElement('style')
  145. drkMo.innerText = `
  146. html {color-scheme: dark!important; color: #000}
  147. html * {color-scheme: light!important; text-shadow: 0 0 .1px}
  148. html body {background: none!important}
  149. #GDM_body,
  150. html, html :is(img, image, embed, video, canvas, option, object, :fullscreen:not(iframe), iframe:not(:fullscreen)),
  151. html body>* [style*="url("]:not([style*="cursor:"]):not([type="text"]) {filter: invert(1)hue-rotate(180deg)!important}
  152. html body>* [style*="url("]:not([style*="cursor:"]) :not(#_mostImportant_),
  153. html:not(#_mostImportant_) :is(canvas, option, object) :is(img, image, embed, video),
  154. html:not(#_mostImportant_⁠) video:fullscreen{filter: unset!important}`
  155. drkMo.classList.add('drkMo')
  156.  
  157. // apply main CSS
  158. document.querySelector('.preventBlinkCSS')?.remove()
  159. if( checkUrlExist( alwaysOnList ) ) {
  160.     applyFilter()
  161. } else if ( checkUrlExist( alwaysOffList ) ) {
  162.     // do nothing
  163. } else {
  164.     let bdyH0 = window.parent.document.body.offsetHeight == 0;
  165.     let frame = self != top;
  166.     let elems = document.querySelectorAll('body > :not(script)');
  167.     let check = (o, t = 0) => {
  168.             let n = n => {return parseInt(getComputedStyle(document.querySelectorAll(o)[t]).getPropertyValue('background-color').match(/\d+/g)[n])};
  169.             return (n(0)*0.299+n(1)*0.587+n(2)*0.114) > 186 || n(3) == 0;
  170.         }
  171.     if((!frame && !bdyH0 || frame) && check('html') && check('body')) applyFilter();
  172.     if(!frame && bdyH0) {for (let i = 0; i < elems.length; i++) {if (elems[i].scrollHeight > window.innerHeight && check('body > :not(script)',i)) applyFilter()}};
  173. }
  174.  
  175. // GDM_toggle function
  176. document.querySelector('style.drkMo') ? (document.querySelector('#GDM_toggle').checked = true) : (document.querySelector('#GDM_toggle').checked = false);
  177. document.querySelector('#GDM_toggle').onclick = _ => toggleFilter();
  178.  
  179. // GDM_add_page function
  180. document.querySelector('#GDM_add_page').onclick = _ => {
  181.     let domain = `, ${new URL(document.URL).hostname.replace('www.','')}`;
  182.     if (document.querySelector('#GDM_on_tab_button:checked') != null) {document.querySelector('#GDM_on_textarea').value += domain};
  183.     if (document.querySelector('#GDM_off_tab_button:checked') != null) {document.querySelector('#GDM_off_textarea').value += domain};
  184.     saveTextarea()
  185. }
  186.  
  187. // GDM_close_window function
  188. document.querySelector('#GDM_close_window').onclick = _ => toggleOption();
  189.  
  190. // GDM_about_tab description
  191. function fillDescription() {
  192.     switch (window.navigator.language) {
  193.         case 'ko':
  194.             return `"On" 탭 URL은 테마를 적용하지만 "Off" 탭은 적용하지 않습니다.\n도메인은 쉼표와 줄 바꿈으로 구분됩니다.`;
  195.         case 'zh-TW':
  196.         case 'zh-HK':
  197.         case 'zh-SG':
  198.             return `" On" 標籤 URL 應用主題但不應用" Off" 標籤 。\n域分爲逗號和換行 。`;
  199.         case 'es':
  200.             return `La URL de la pestaña "On" aplica el tema, pero la pestaña "Off" no.La línea principal se divide en coma y cambio de línea.`;
  201.         case 'fr':
  202.             return `L'URL de l'onglet On applique le thème, mais pas l'onglet Off.\nLes domaines sont séparés par des virgules et des lignes.`;
  203.         case 'de':
  204.             return `Die URL der Registerkarte "On" setzt das Thema an, aber nicht die Registerkarte "Off".\nDomains werden durch Kommata und Zeilenumbrüche getrennt.`;
  205.         case 'it':
  206.             return `La scheda "On" URL applica il tema, ma non la scheda "Off".\nI domini sono separati da una virgola e da un'interruzione di riga.`;
  207.         case 'vi':
  208.             return `URL của tab "On" áp dụng chủ đề nhưng tab "Off" không áp dụng.\nDomain được phân loại bằng dấu phẩy và thay đổi dòng.`;
  209.         case 'th':
  210.             return `ที่อยู่ URL ของแท็บ "On" ใช้ธีม แต่ไม่ใช้แท็บ "Off"\nโดเมนถูกแบ่งออกเป็นลูกน้ำและการสลับบรรทัด`;
  211.         case 'id':
  212.             return `URL tab "On" menerapkan tema, namun tab "Off" tidak diterapkan.\nDomain terbagi menjadi koma dan perubahan baris.`;
  213.         case 'zh-CN':
  214.             return `" On" 标签 URL 应用主题但不应用" Off" 标签 。\n域分为逗号和换行 。`;
  215.         case 'ja':
  216.             return `"On"タブURLはテーマを適用しますが、"Off"タブは適用されません。\nドメインはコンマと行違いに区分されます。`;
  217.         case 'ru':
  218.             return `URL вкладки "On" применяет тему, но вкладка "Off" не применяется.\ndomain делится на запятую и запятую.`;
  219.         default:
  220.             return `"On" tab URLs apply themes, but not "Off" tab URLs.\nDomains are separated by commas and line breaks.`;
  221.     }
  222. }
  223. document.querySelector('#GDM_about_tab').textContent = fillDescription();
  224.  
  225. // tampermonkey menu
  226. GM_registerMenuCommand('On/Off', toggleFilter);
  227. GM_registerMenuCommand('Filter', toggleOption);
  228. })()})

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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