☰

Universal Dark Theme

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

当前为 2020-03-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name		Universal Dark Theme
  3. // @namespace	uni_dark_theme
  4. // @version		1.0
  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_addStyle
  12. // @grant		GM_getValue
  13. // @grant		GM_setValue
  14. // @grant		GM_registerMenuCommand
  15. // @run-at		document-start
  16. // @noframes
  17. // ==/UserScript==
  18.  
  19. (function() {
  20. 	'use strict';
  21.  
  22. 	var el;
  23. 	var css;
  24. 	var cfg_color;
  25. 	var cfg_bgclr;
  26. 	var cfg_visclr;
  27. 	var cfg_excl;
  28. 	var cfg_css;
  29. 	var cfg_js;
  30. 	var cfg_active = (localStorage.getItem('active') === 'true');
  31. 	function load_settings()
  32. 	{
  33. 		cfg_excl = localStorage.getItem('excl') || "";
  34. 		cfg_css = localStorage.getItem('css') || "";
  35. 		cfg_js = localStorage.getItem('js') || "";
  36. 		if (typeof GM_getValue !== "undefined")
  37. 		{
  38. 			cfg_color = GM_getValue("Color", "#c0c0c0");
  39. 			cfg_bgclr = GM_getValue("bgColor", "#2b2b2b");
  40. 			cfg_visclr = GM_getValue("visitedColor", "#a4a4a4");
  41. 		}
  42.     }
  43.  
  44. 	function activate(yes, prev_active)
  45. 	{
  46. 		if(prev_active && el){document.body.removeChild(el);}
  47. 		if(yes)
  48. 		{
  49. 			make_css();
  50. 			el = GM_addStyle(css);
  51. 			el = document.body.appendChild(el);
  52. 			if(cfg_js){eval(cfg_js);}
  53. 		}
  54. 	}
  55. 	function toggleDT()
  56. 	{
  57. 		load_settings();
  58. 		let prev_active = cfg_active;
  59. 		cfg_active = !(localStorage.getItem('active') === 'true');
  60. 		activate(cfg_active, prev_active);
  61. 		if(!cfg_active)
  62. 		{
  63. 			localStorage.removeItem('active');
  64. 		}
  65. 		else
  66. 		{
  67. 			localStorage.setItem('active', "true");
  68. 		}
  69. 	}
  70.  
  71. 	if (typeof GM_registerMenuCommand !== "undefined")
  72. 	{
  73. 		GM_registerMenuCommand("Dark Theme Configuration", cfg, "D");
  74. 		GM_registerMenuCommand("Toggle Dark Theme", toggleDT, "T");
  75. 	}
  76.  
  77. 	function make_css()
  78. 	{
  79. 		let exclusions;
  80. 		let exc_txt = ""
  81. 		if(cfg_excl !== "")
  82. 		{
  83. 			exclusions = cfg_excl.split(",");
  84. 			for (var i = 0, len = exclusions.length; i < len; i++)
  85. 			{
  86. 				exc_txt += ":not("+exclusions[i]+")";
  87. 			}
  88. 		}
  89. 		////////////// Main thing, the style!:
  90. 		css = `
  91. 		*`+exc_txt+` {
  92. 			color: `+cfg_color+` !important;
  93. 			background: `+cfg_bgclr+` !important;
  94. 			border-color: `+cfg_color+` !important;
  95. 		}
  96. 		a:visited, a:hover`+exc_txt+` {
  97. 			color: `+cfg_visclr+` !important;
  98. 		}
  99. 		`+cfg_css+`
  100. 		`;
  101. 		//////////////
  102. 	}
  103.  
  104. 	if(cfg_active)
  105. 	{
  106. 		load_settings();
  107. 		make_css();
  108. 		el = GM_addStyle(css);
  109. 		document.addEventListener("DOMContentLoaded", function(){ el = document.body.appendChild(el); if(cfg_js){eval(cfg_js);} });
  110. 	}
  111.  
  112. 	var t;
  113. 	function cfg()
  114. 	{
  115. 		if (typeof GM_setValue !== "undefined")
  116. 		{
  117. 			function saveCfg()
  118. 			{
  119. 				GM_setValue("Color", document.getElementById("color").value);
  120. 				GM_setValue("bgColor", document.getElementById("bgclr").value);
  121. 				GM_setValue("visitedColor", document.getElementById("visitedColor").value);
  122. 				localStorage.setItem('excl', document.getElementById("excl").value);
  123. 				localStorage.setItem('css', document.getElementById("css").value);
  124. 				localStorage.setItem('js', document.getElementById("js").value);
  125. 				localStorage.setItem('active', document.getElementById("active").checked);
  126. 				// pretty text "saved"
  127. 				document.getElementById("cfg_save").value = "SAVED !";
  128. 				clearTimeout(t);
  129. 				t = setTimeout(function() {document.getElementById("cfg_save").value = "Save configuration";},1500)
  130. 				// update active configuration
  131. 				cfg_color = document.getElementById("color").value;
  132. 				cfg_bgclr = document.getElementById("bgclr").value;
  133. 				cfg_visclr = document.getElementById("visitedColor").value;
  134. 				cfg_excl = document.getElementById("excl").value;
  135. 				cfg_css = document.getElementById("css").value;
  136. 				cfg_js = document.getElementById("js").value;
  137. 				activate(document.getElementById("active").checked, cfg_active );
  138. 				cfg_active = document.getElementById("active").checked;
  139. 				// clean up
  140. 				if(!document.getElementById("active").checked) { localStorage.removeItem('active'); }
  141. 				if(!document.getElementById("excl").value) { localStorage.removeItem('excl'); }
  142. 				if(!document.getElementById("css").value) { localStorage.removeItem('css'); }
  143. 				if(!document.getElementById("js").value) { localStorage.removeItem('js'); }
  144. 			}
  145. 			load_settings();
  146. 			var div = document.createElement("div");
  147. 			div.style.position = "fixed";
  148. 			div.style.top = "5%";
  149. 			div.style.left = "50%";
  150. 			div.style.margin = "5% -222px";
  151. 			div.style.width = "444px";
  152. 			div.style.border = "solid 1px black";
  153. 			div.style.background = "silver";
  154. 			div.style.zIndex = 8888888;
  155. 			div.innerHTML = "<b><center>Configuration</center></b>"
  156. 			+ "<br><br><input id='color' type='text' size='7'> Text color (empty = site default)"
  157. 			+ "<br><br><input id='bgclr' type='text' size='7'> Background color"
  158. 			+ "<br><br><input id='visitedColor' type='text' size='7'> Visited & hovered links color"
  159. 			+ "<br><br><b>Per-site settings (stored in browser cookies called LocalStorage):</b>"
  160. 			+ "<br><br><center><input id='active' type='checkbox'> Enabled for this website"
  161. 			+ "<br><br>Excluded css elements (e.g. \"#id1,.class2,input\"):<br><textarea id='excl' style='margin: 0px; width: 400px; height: 50px; resize:both;'></textarea>"
  162. 			+ "<br><br>Custom CSS style:<br><textarea id='css' style='margin: 0px; width: 400px; height: 50px; resize:both;'></textarea>"
  163. 			+ "<br><br>Custom JS Action:<br><textarea id='js' style='margin: 0px; width: 400px; height: 50px; resize:both;'></textarea>"
  164. 			+ "<br><input id='cfg_save' type='button' value='Save configuration'> <input id='cfg_close' type='button' value='Close'></center>";
  165. 			document.body.appendChild(div);
  166. 			document.getElementById("color").value = cfg_color;
  167. 			document.getElementById("bgclr").value = cfg_bgclr;
  168. 			document.getElementById("visitedColor").value = cfg_visclr;
  169. 			//
  170. 			document.getElementById("active").checked = cfg_active;
  171. 			document.getElementById("excl").value = cfg_excl;
  172. 			document.getElementById("css").value = cfg_css;
  173. 			document.getElementById("js").value = cfg_js;
  174. 			document.getElementById("cfg_save").addEventListener("click", saveCfg, true);
  175. 			document.getElementById("cfg_close").addEventListener("click", function(){div.remove();clearTimeout(t);}, true);
  176. 		}
  177. 		else
  178. 		{
  179. 			alert("Sorry, Chrome userscripts in native mode can't have configurations! Install TamperMonkey userscript-manager extension");
  180. 		}
  181. 	}
  182.  
  183. })();