Universal Dark Theme Maker

Simple Dark Theme style for any website which you can configure per-site

当前为 2025-02-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Universal Dark Theme Maker
  3. // @namespace uni_dark_theme
  4. // @version 1.4
  5. // @description Simple Dark Theme style for any website which you can configure per-site
  6. // @supportURL https://github.com/Owyn/Universal_Dark_Theme/issues
  7. // @homepage https://github.com/Owyn/Universal_Dark_Theme
  8. // @icon https://images2.imgbox.com/b3/67/Aq5XazuW_o.png
  9. // @author Owyn
  10. // @match *://*/*
  11. // @grant GM.getValue
  12. // @grant GM.setValue
  13. // @grant GM_addElement
  14. // @grant GM_registerMenuCommand
  15. // @grant unsafeWindow
  16. // @sandbox JavaScript
  17. // @compatible Chrome
  18. // @compatible Firefox
  19. // @run-at document-start
  20. // ==/UserScript==
  21.  
  22. (function() {
  23. 'use strict';
  24.  
  25. var el;
  26. var css;
  27. var cfg_color = "#c0c0c0";
  28. var cfg_bgclr = "#2e2e2e";
  29. var cfg_bgimg;
  30. var cfg_bgtrans;
  31. var cfg_visclr = "#a4a4a4";
  32. var cfg_excl;
  33. var cfg_css;
  34. var cfg_js;
  35. var cfg_match_pseudo;
  36. var cfg_active;
  37. switch(localStorage.getItem('active'))
  38. {
  39. case "true": // back-compatibility
  40. case "1":
  41. cfg_active = true;
  42. load_settings(); // start loading asap
  43. break;
  44. default:
  45. cfg_active = false;
  46. break;
  47. }
  48. async function load_settings()
  49. {
  50. cfg_excl = localStorage.getItem('excl') || "";
  51. cfg_css = localStorage.getItem('css') || "";
  52. cfg_js = localStorage.getItem('js') || "";
  53. cfg_bgimg = (localStorage.getItem('bgimg') === '1');
  54. cfg_bgtrans = (localStorage.getItem('bgtrans') === '1');
  55. cfg_match_pseudo = (localStorage.getItem('match_pseudo') === '1');
  56. let done;
  57. console.debug("UDT: GM settings started loading")
  58. if (typeof GM !== "undefined" && typeof GM.getValue === "function")
  59. {
  60. done = Promise.all([
  61. GM.getValue("Color", "#c0c0c0").then( function(result) { cfg_color = result; } , console.error),
  62. GM.getValue("bgColor", "#2e2e2e").then( function(result) { cfg_bgclr = result; } , console.error),
  63. GM.getValue("visitedColor", "#a4a4a4").then( function(result) { cfg_visclr = result; } , console.error)
  64. ]).then(
  65. function() { console.debug("UDT: GM settings loaded"); updateHTMLColorVars(); },
  66. function(error) { console.error("UDT: GM settings NOT loaded: " + error); }
  67. );
  68. }
  69. return done
  70. }
  71.  
  72. function updateHTMLColorVars()
  73. {
  74. document.documentElement.style.setProperty('--cfg_color', cfg_color);
  75. document.documentElement.style.setProperty('--cfg_bgclr', cfg_bgclr);
  76. document.documentElement.style.setProperty('--cfg_visclr', cfg_visclr);
  77. }
  78.  
  79. function activate(yes, prev_active)
  80. {
  81. if(prev_active && el){console.debug("Removing dark style..."); el.remove();}
  82. if(yes)
  83. {
  84. make_css();
  85. console.debug("adding dark style...");
  86. el = GM_addElement(document.documentElement, 'style', {textContent: css});
  87. console.debug(el);
  88. if(cfg_js){eval(cfg_js);}
  89. }
  90. }
  91. function toggleDT()
  92. {
  93. cfg_active = !cfg_active;
  94. activate(cfg_active, !cfg_active);
  95. if(!cfg_active)
  96. {
  97. localStorage.removeItem('active');
  98. }
  99. else
  100. {
  101. localStorage.setItem('active', "1");
  102. }
  103. }
  104.  
  105. function make_css()
  106. {
  107. let exclusions;
  108. let exc_txt = ""
  109. if(cfg_excl !== "")
  110. {
  111. exclusions = cfg_excl.split(",");
  112. for (var i = 0, len = exclusions.length; i < len; i++)
  113. {
  114. exc_txt += ":not("+exclusions[i]+")";
  115. }
  116. }
  117. let bgimg_txt = cfg_bgimg ? "-color" : "";
  118. let match_pseudo = cfg_match_pseudo ? (",*"+exc_txt+"::before"+",*"+exc_txt+"::after") : "";
  119. ////////////// Main thing, the style!:
  120. css = (cfg_excl !== "*" ?(cfg_bgtrans ?`
  121. :root`+exc_txt+` {
  122. color: var(--cfg_color) !important;
  123. background`+bgimg_txt+`: var(--cfg_bgclr) !important;
  124. border-color: var(--cfg_color) !important;
  125. scrollbar-color: var(--cfg_visclr) var(--cfg_bgclr) !important;
  126. color-scheme: dark;
  127. }
  128. :root `:``)+`*`+exc_txt+match_pseudo+` {
  129. color: `+(cfg_bgtrans ? `unset` : `var(--cfg_color)`)+` !important;
  130. background`+bgimg_txt+`: `+(cfg_bgtrans ? `unset` : `var(--cfg_bgclr)`)+` !important;
  131. border-color: var(--cfg_color) !important;
  132. scrollbar-color: var(--cfg_visclr) var(--cfg_bgclr) !important;
  133. color-scheme: dark;
  134. }
  135. :visited`+exc_txt+`, a:hover`+exc_txt+` {
  136. color: var(--cfg_visclr) !important;
  137. }
  138. input:focus`+exc_txt+`,textarea:focus`+exc_txt+`,select:focus`+exc_txt+`{
  139. outline: 1px solid var(--cfg_visclr) !important;
  140. }
  141. `:"")+cfg_css;
  142. //////////////
  143. }
  144.  
  145. if(cfg_active)
  146. {
  147. console.debug("Adding dark style...");
  148. make_css();
  149. el = GM_addElement(document.documentElement, 'style', {textContent: css});
  150. console.debug(unsafeWindow);
  151. console.debug(el);
  152. window.addEventListener("DOMContentLoaded", function(){
  153. if (document.documentElement.lastElementChild !== el && el.parentNode === document.documentElement) // very fast browser
  154. {
  155. while (document.documentElement.lastElementChild !== el)
  156. {
  157. document.documentElement.prepend(document.documentElement.lastElementChild);
  158. }
  159. console.debug("moved dark style to the bottom"); // actually not, cuz security restrictions
  160. }
  161. if (cfg_js)
  162. {
  163. eval(cfg_js); // execute custom JS when the page fully loads
  164. }
  165. });
  166. }
  167.  
  168. if (typeof GM_registerMenuCommand !== "undefined")
  169. {
  170. GM_registerMenuCommand("Dark Theme Configuration", ((typeof GM_addElement === "function") ? () => load_settings().then(cfg, console.error) : tell_users_they_are_wrong), "D");
  171. GM_registerMenuCommand("Toggle Dark Theme", ((typeof GM_addElement === "function") ? () => load_settings().then(toggleDT, console.error) : tell_users_they_are_wrong), "T");
  172. }
  173. else
  174. {
  175. tell_users_they_are_wrong();
  176. }
  177.  
  178. function tell_users_they_are_wrong()
  179. {
  180. let txt = "Sorry, your userscript manager is missing functionality needed for Universal Dark Theme script to work! Install TamperMonkey userscript-manager extension (the №1 most popular userscript-manager extension - how did you miss it?...)"
  181. console.error(txt);
  182. alert(txt);
  183. }
  184.  
  185. var t;
  186. var div;
  187. function cfg()
  188. {
  189. console.debug("UDT: config window open");
  190. function saveCfg()
  191. {
  192. if (typeof GM !== "undefined" && typeof GM.setValue === "function")
  193. {
  194. GM.setValue("Color", id("color").value);
  195. GM.setValue("bgColor", id("bgclr").value);
  196. GM.setValue("visitedColor", id("visitedColor").value);
  197. }
  198. localStorage.setItem('excl', id("excl").value);
  199. localStorage.setItem('css', id("css").value);
  200. localStorage.setItem('js', id("js").value);
  201. localStorage.setItem('active', id("active").checked ? "1" : "0");
  202. localStorage.setItem('match_pseudo', id("match_pseudo").checked ? "1" : "0");
  203. localStorage.setItem('bgimg', id("bgimg").checked ? "1" : "0");
  204. localStorage.setItem('bgtrans', id("bgtrans").checked ? "1" : "0");
  205. // pretty text "saved"
  206. id("cfg_save").value = "SAVED OK";
  207. clearTimeout(t);
  208. t = setTimeout(function() {id("cfg_save").value = "Save config";},1500)
  209. // update active configuration
  210. cfg_color = id("color").value;
  211. cfg_bgclr = id("bgclr").value;
  212. cfg_bgimg = id("bgimg").checked;
  213. cfg_bgtrans = id("bgtrans").checked;
  214. cfg_match_pseudo = id("match_pseudo").checked;
  215. cfg_visclr = id("visitedColor").value;
  216. cfg_excl = id("excl").value;
  217. cfg_css = id("css").value;
  218. cfg_js = id("js").value;
  219. activate(id("active").checked, cfg_active );
  220. cfg_active = id("active").checked;
  221. //
  222. updateHTMLColorVars();
  223. // clean up
  224. if(!id("active").checked) { localStorage.removeItem('active'); }
  225. if(!id("match_pseudo").checked) { localStorage.removeItem('match_pseudo'); }
  226. if(!id("bgimg").checked) { localStorage.removeItem('bgimg'); }
  227. if(!id("bgtrans").checked) { localStorage.removeItem('bgtrans'); }
  228. if(!id("excl").value) { localStorage.removeItem('excl'); }
  229. if(!id("css").value) { localStorage.removeItem('css'); }
  230. if(!id("js").value) { localStorage.removeItem('js'); }
  231. }
  232. if(div)
  233. {
  234. if(!div.isConnected) document.body.appendChild(div); // it was there but got closed
  235. return; // div already built
  236. }
  237. div = document.createElement("div");
  238. div.style = "all: initial !important; margin: auto !important; width: fit-content !important; height: fit-content !important; border: 1px solid var(--cfg_color) !important; background: var(--cfg_bgclr) !important; position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; line-height: 1 !important;"; // all:initial to disable CSS inheritance
  239. div.attachShadow({mode: 'open'}); // outer CSS selectors won't affect it now (but we will still inherit styles) // we could use an iframe but extensions might block it? <iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>
  240. const id = div.shadowRoot.getElementById.bind(div.shadowRoot);
  241. let shadowStyle = `* {
  242. color-scheme: dark;
  243. color: var(--cfg_color);
  244. background: var(--cfg_bgclr);
  245. border-color: var(--cfg_color);
  246. padding: initial; margin: initial;
  247. }
  248. :visited, a:hover { color: var(--cfg_visclr); }
  249. input:focus,textarea:focus,select:focus { outline: 2px solid var(--cfg_visclr); }
  250. tr,td { padding:1px; }
  251. input { padding:0px 3px; }
  252. input[type='checkbox'] { padding: 0px; }
  253. div { margin: auto; display: table; }
  254. div > input { margin:2px; width: 6em; }
  255. textarea { margin: 0px; min-width: 400px; min-height: 1em; height: 50px; resize:both; }`;
  256. div.shadowRoot.innerHTML = `<b><br><center>Configuration</center></b>
  257. <div>
  258. <br><input id='color' type='text'> Text color (empty = site default)
  259. <br><input id='bgclr' type='text'> Background color
  260. <br><input id='visitedColor' type='text'>&nbsp;<a href='' onclick='return false;'>Visited & hovered link color</a>
  261. <br><br></div><center><b>Per-site settings (stored in browser cookies called LocalStorage):</b>
  262. <table><tr><td><input id='active' type='checkbox'> Enabled for this website
  263. </td><td><input id='match_pseudo' type='checkbox'> Also color pseudo-elements
  264. </td></tr><br><br><tr><td><input id='bgimg' type='checkbox'> Keep background-images
  265. </td><td><input id='bgtrans' type='checkbox'> Make background transparent </td></tr></table>
  266. <br>Excluded css elements (e.g. \"#id1,.class2,input\"):<br><textarea id='excl'></textarea>
  267. <br><br>Custom CSS style:<br><textarea id='css'></textarea>
  268. <br><br>Custom JS Action:<br><textarea id='js'></textarea>
  269. <br><input id='cfg_save' type='button' value='Save config'> <input id='cfg_close' type='button' value='Close'></center>`;
  270. document.body.appendChild(div);
  271. GM_addElement(div.shadowRoot, 'style', {textContent: shadowStyle}); // damn CSP gets us even in our own shadow...
  272. id("color").value = cfg_color;
  273. id("bgclr").value = cfg_bgclr;
  274. id("bgimg").checked = cfg_bgimg;
  275. id("bgtrans").checked = cfg_bgtrans;
  276. id("visitedColor").value = cfg_visclr;
  277. //
  278. id("active").checked = cfg_active;
  279. id("match_pseudo").checked = cfg_match_pseudo;
  280. id("excl").value = cfg_excl;
  281. id("css").value = cfg_css;
  282. id("js").value = cfg_js;
  283. id("cfg_save").addEventListener("click", saveCfg, true);
  284. id("cfg_close").addEventListener("click", () => div.remove(), true);
  285. }
  286.  
  287. })();