☰

ETI Color Scheme Randomizer

Randomly generates a new color scheme every page load

  1. // ==UserScript==
  2. // @name           ETI Color Scheme Randomizer
  3. // @namespace      pendevin
  4. // @description    Randomly generates a new color scheme every page load
  5. // @include        http://endoftheinter.net*
  6. // @include        http://boards.endoftheinter.net*
  7. // @include        http://images.endoftheinter.net*
  8. // @include        http://archives.endoftheinter.net*
  9. // @include        https://endoftheinter.net*
  10. // @include        https://boards.endoftheinter.net*
  11. // @include        https://images.endoftheinter.net*
  12. // @include        https://archives.endoftheinter.net*
  13. // @exclude        http://endoftheinter.net/?r=*
  14. // @exclude        http://images.endoftheinter.net/img/*
  15. // @exclude        https://endoftheinter.net/?r=*
  16. // @exclude        https://images.endoftheinter.net/img/*
  17. // @version        1.1
  18. // @require        http://code.jquery.com/jquery-2.1.3.min.js
  19. // ==/UserScript==
  20.  
  21. //
  22. //  **BEGIN USER SETTINGS**
  23. //
  24.  
  25. //When true, the script automatically changes the color scheme after a set amount of time as well as each page load
  26. const TIMER=true;
  27.  
  28. //User defined values
  29. //when Timer is true, defines the interval between color scheme changes
  30. const MINUTES=0;
  31. const SECONDS=.1;
  32.  
  33. //When true, the script changes the color scheme whenever the 'R' key is pressed
  34. const RRRR=true;
  35.  
  36. //
  37. //	**END USER SETTINGS**
  38. //
  39.  
  40. //ll breaks without noconflict jquery
  41. this.$=this.jQuery=jQuery.noConflict(true);
  42.  
  43. //adds a style to a document and returns the style object *JQUERY
  44. //css is a string, id is an optional string that determines the object's id
  45. function addStyle(css, id) {
  46. 	//create a style
  47. 	var style = $('<style type="text/css">');
  48. 	//add the css data to it
  49. 	style.html(css);
  50. 	if (id) {
  51. 		//remove any style that has our id
  52. 		$('#' + id).remove();
  53. 		//give our style the id after removing the other stuff. idk if it matters, but i'm too lazy to find out
  54. 		style.attr('id', id);
  55. 	}
  56. 	//add the style into the head
  57. 	$('head').append(style);
  58. 	//we're outta here
  59. 	return style;
  60. }
  61.  
  62. //Converts an RGB color value to HSV. Conversion formula
  63. //adapted from http://en.wikipedia.org/wiki/HSV_color_space.
  64. //Assumes r, g, and b are contained in the set [0, 255] and
  65. //returns hin the set [0, 360] and, s and v in the set [0, 1].
  66. function rgbToHsl(r,g,b){
  67. 	r/=255, g/=255, b/=255;
  68. 	var max=Math.max(r,g,b), min=Math.min(r,g,b);
  69. 	var h, s, l=(max+min)/2;
  70. 	if(max==min)
  71. 		h=s=0; // achromatic
  72. 	else{
  73. 		var d=max-min;
  74. 		s=l>0.5?d/(2-max-min):d/(max+min);
  75. 		if(max==r)
  76. 			h=(g-b)/d+(g<b?6:0);
  77. 		else if(max==g)
  78. 			h=(b-r)/d+2;
  79. 		else if(max==b)
  80. 			h=(r-g)/d+4;
  81. 		h/=6;
  82. 	}
  83. 	return [Math.round(h*360), Math.round(s*100), Math.round(l*100)];
  84. }
  85.  
  86. //takes a color <decimal rgb> and returns a contrasting color
  87. //99% guaranteed readable, 50% guaranteed ugly
  88. function complement(color){
  89. 	var hsl=rgbToHsl(color[0],color[1],color[2]);
  90. 	hsl[0]=(hsl[0]+180)%360;
  91.  
  92. 	if(hsl[1]<=40)
  93. 		hsl[1]=hsl[1]+60;
  94. 	else if(hsl[1]<=50)
  95. 		hsl[1]=100;
  96. 	else if(hsl[1]>=60)
  97. 		hsl[1]=hsl[1]-60;
  98. 	else if(hsl[1]>50)
  99. 		hsl[1]=0;
  100.  
  101. 	if(hsl[2]<=40)
  102. 		hsl[2]=hsl[2]+60;
  103. 	else if(hsl[2]<50)
  104. 		hsl[2]=100;
  105. 	else if(hsl[2]>=60)
  106. 		hsl[2]=hsl[2]-60;
  107. 	else if(hsl[2]>=50)
  108. 		hsl[2]=0;
  109. 	return hsl;
  110. }
  111.  
  112. //takes a number and changes it to a random number in a range centered on the input, weighted towards the center
  113. //(input number <0-1>, acceptable range of output <fraction of 1>)
  114. function fudge(input,range){
  115. 	var output=range*Math.tan(Math.PI*(Math.random()/2-.25))/2+input;
  116. 	if(output>1)
  117. 		output=output+range/2;
  118. 	else if(output<0)
  119. 		output=output-range/2;
  120. 	return output;
  121. }
  122.  
  123. //takes a number and returns a number sort of near it, weighted toward the center
  124. function fudger(color){
  125. 	return [Math.round(fudge(color[0]/360,.3)*360),Math.round(fudge(color[1]/100,.2)*100),Math.round(fudge(color[2]/100,.2)*100)];
  126. }
  127.  
  128. //generates a random rgb color
  129. function randomColor(){
  130. 	return [Math.round(Math.random()*255),Math.round(Math.random()*255),Math.round(Math.random()*255)];
  131. }
  132.  
  133. //make a random color scheme
  134. function randomize(){
  135. 	//menubar etc
  136. 	var bg1=randomColor()
  137. 	var color1=complement(bg1);
  138. 	var color11=fudger(color1);
  139. 	var color12=fudger(color1);
  140.  
  141. 	//userbar, poll, graph, quickpost, etc
  142. 	var bg2=randomColor();
  143. 	var color2=complement(bg2);
  144. 	var color21=fudger(color2);
  145. 	var color22=fudger(color2);
  146.  
  147. 	//infobar, tables, etc
  148. 	var bg3=randomColor();
  149. 	var color3=complement(bg3);
  150. 	var color31=fudger(color3);
  151. 	var color32=fudger(color3);
  152.  
  153. 	//body etc
  154. 	var bg4=randomColor();
  155. 	var color4=complement(bg4);
  156. 	var color41=fudger(color4);
  157. 	var color42=fudger(color4);
  158.  
  159. 	//message, search, etc
  160. 	var bg5=randomColor();
  161. 	var color5=complement(bg5);
  162. 	var color51=fudger(color5);
  163. 	var color52=fudger(color5);
  164.  
  165. 	//message-top etc
  166. 	var bg6=randomColor();
  167. 	var color6=complement(bg6);
  168. 	var color61=fudger(color6);
  169. 	var color62=fudger(color6);
  170.  
  171. 	var css="\
  172. 		div.menubar, table.classic tr th, table.classic tr th.title, div.stats{\
  173. 			background-color:rgb("+bg1[0]+","+bg1[1]+","+bg1[2]+");\
  174. 			color:hsl("+color1[0]+","+color1[1]+"%,"+color1[2]+"%);\
  175. 		}\
  176. 		div.menubar a, table.classic tr th a, div.menubar a:visited, table.classic tr th a:visited, div.stats a, div.stats a:visited{\
  177. 			color:hsl("+color1[0]+","+color1[1]+"%,"+color1[2]+"%);\
  178. 		}\
  179. 		div.menubar a:hover, table.classic tr th a:hover, div.stats a:hover{\
  180. 			color:hsl("+color11[0]+","+color11[1]+"%,"+color11[2]+"%);\
  181. 		}\
  182. 		div.menubar a:active, table.classic tr th a:active, div.stats a:active{\
  183. 			color:hsl("+color12[0]+","+color12[1]+"%,"+color12[2]+"%);\
  184. 		}\
  185. 		\
  186. 		div.userbar{\
  187. 			background-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  188. 			color:hsl("+color2[0]+","+color2[1]+"%,"+color2[2]+"%);\
  189. 		}\
  190. 		div.userbar a, div.userbar a:visited{\
  191. 			color:hsl("+color2[0]+","+color2[1]+"%,"+color2[2]+"%);\
  192. 		}\
  193. 		div.userbar a:hover{\
  194. 			color:hsl("+color21[0]+","+color21[1]+"%,"+color21[2]+"%);\
  195. 		}\
  196. 		div.userbar a:active{\
  197. 			color:hsl("+color22[0]+","+color22[1]+"%,"+color22[2]+"%);\
  198. 		}\
  199. 		table.poll div{\
  200. 			background-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  201. 		}\
  202. 		div.graph{\
  203. 			background-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  204. 			border-color:hsl("+color4[0]+","+color4[1]+"%,"+color4[2]+"%);\
  205. 		}\
  206. 		.quickpost-expanded .quickpost{\
  207. 			border-top-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  208. 		}\
  209. 		\
  210. 		div.infobar, table.grid tr th, div.pager{\
  211. 			background-color:rgb("+bg3[0]+","+bg3[1]+","+bg3[2]+");\
  212. 			color:hsl("+color3[0]+","+color3[1]+"%,"+color3[2]+"%);\
  213. 		}\
  214. 		div.infobar a, table.grid tr th a, div.infobar a:visited, table.grid tr th a:visited, div.pager a, div.pager a:visited{\
  215. 			background-color:rgb("+bg3[0]+","+bg3[1]+","+bg3[2]+");\
  216. 			color:hsl("+color3[0]+","+color3[1]+"%,"+color3[2]+"%);\
  217. 		}\
  218. 		div.infobar a:hover, table.grid tr th a:hover, div.pager a:hover{\
  219. 			color:hsl("+color31[0]+","+color31[1]+"%,"+color31[2]+"%);\
  220. 		}\
  221. 		div.infobar a:active, table.grid tr th a:active, div.pager a:active{\
  222. 			color:hsl("+color32[0]+","+color32[1]+"%,"+color32[2]+"%);\
  223. 		}\
  224. 		.quoter-button{\
  225. 			background-color:rgb("+bg3[0]+","+bg3[1]+","+bg3[2]+");\
  226. 			color:hsl("+color3[0]+","+color3[1]+"%,"+color3[2]+"%);\
  227. 			border-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  228. 		}\
  229. 		a.quoter-button:visited{\
  230. 			color:hsl("+color3[0]+","+color3[1]+"%,"+color3[2]+"%);\
  231. 		}\
  232. 		\
  233. 		body{\
  234. 			background:rgb("+bg4[0]+","+bg4[1]+","+bg4[2]+");\
  235. 			color:hsl("+color4[0]+","+color4[1]+"%,"+color4[2]+"%);\
  236. 		}\
  237. 		textarea.locked, .quickpost{\
  238. 			background-color:rgb("+bg4[0]+","+bg4[1]+","+bg4[2]+");\
  239. 		}\
  240. 		.imagemap{\
  241. 			background-color:rgb("+bg4[0]+","+bg4[1]+","+bg4[2]+");\
  242. 			border-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  243. 		}\
  244. 		a{\
  245. 			color:hsl("+color41[0]+","+color41[1]+"%,"+color41[2]+"%);\
  246. 		}\
  247. 		a:visited{\
  248. 			color:hsl("+color42[0]+","+color42[1]+"%,"+color42[2]+"%);\
  249. 		}\
  250. 		a span.m{\
  251. 			border-bottom-color:hsl("+color41[0]+","+color41[1]+"%,"+color41[2]+"%);\
  252. 		}\
  253. 		a:visited span.m{\
  254. 			border-bottom-color:hsl("+color42[0]+","+color42[1]+"%,"+color42[2]+"%);\
  255. 		}\
  256. 		table.grid tr td, table.grid tr th{\
  257. 			border-color:rgb("+bg4[0]+","+bg4[1]+","+bg4[2]+");\
  258. 		}\
  259. 		\
  260. 		table.search th, table.search tr td, div.graph span, table.message-body tr td.message, div.message, table.message-body tr td.userpic, table.grid tr td,\
  261. 		.image_grid .grid_block .block_desc,.quoted-message .message-top{\
  262. 			background-color:rgb("+bg5[0]+","+bg5[1]+","+bg5[2]+");\
  263. 			color:hsl("+color5[0]+","+color5[1]+"%,"+color5[2]+"%);\
  264. 		}\
  265. 		table.message-body tr td.message a, div.message a, table.grid tr td a, .image_grid .grid_block .block_desc a, .quoted-message a,\
  266. 		.quoted-message .message-top a{\
  267. 			color:hsl("+color51[0]+","+color51[1]+"%,"+color51[2]+"%);\
  268. 		}\
  269. 		table.message-body tr td.message a:visited, div.message a:visited, table.grid tr td a:visited, .image_grid .grid_block .block_desc a:visited,\
  270. 		.quoted-message a:visited, .quoted-message .message-top a:visited{\
  271. 			color:hsl("+color52[0]+","+color52[1]+"%,"+color52[2]+"%);\
  272. 		}\
  273. 		.quoted-message{\
  274. 			background-color:rgb("+bg5[0]+","+bg5[1]+","+bg5[2]+");\
  275. 			color:hsl("+color5[0]+","+color5[1]+"%,"+color5[2]+"%);\
  276. 			border-left-color:rgb("+bg6[0]+","+bg6[1]+","+bg6[2]+");\
  277. 		}\
  278. 		.quickpost .quickpost-nub{\
  279. 			background-color:rgb("+bg5[0]+","+bg5[1]+","+bg5[2]+");\
  280. 			color:hsl("+color5[0]+","+color5[1]+"%,"+color5[2]+"%);\
  281. 			border-color:rgb("+bg2[0]+","+bg2[1]+","+bg2[2]+");\
  282. 		}\
  283. 		\
  284. 		div.message-top{\
  285. 			background-color:rgb("+bg6[0]+","+bg6[1]+","+bg6[2]+");\
  286. 			color:hsl("+color6[0]+","+color6[1]+"%,"+color6[2]+"%);\
  287. 		}\
  288. 		div.message-top a{\
  289. 			color:hsl("+color61[0]+","+color61[1]+"%,"+color61[2]+"%);\
  290. 		}\
  291. 		div.message-top a:visited{\
  292. 			color:hsl("+color62[0]+","+color62[1]+"%,"+color62[2]+"%);\
  293. 		}\
  294. 		\
  295. 		span.window-header-title{\
  296. 			color:#000000;\
  297. 		}\
  298. 	";
  299.  
  300. 	//oh man if you don't let the styles build up, then there's hardly any lag
  301. 	if(document.getElementById('Random_Colors'))
  302. 		document.head.removeChild(document.getElementById('Random_Colors'));
  303. 	addStyle(css,'Random_Colors');
  304. }
  305.  
  306. randomize();
  307. if(TIMER)
  308. 	window.setInterval(randomize,MINUTES*60000+SECONDS*1000);
  309. if(RRRR)
  310. 	document.addEventListener('keypress',function(e){if(e.charCode==114)randomize();},false);
  311. GM_registerMenuCommand("Randomize Color Scheme",randomize,"R");