☰

Themes - Bonk.io

Recolors elements in Bonk.io to customizable colors, and allows toggling your theme with a hotkey

当前为 2021-11-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Themes - Bonk.io
  3. // @description  Recolors elements in Bonk.io to customizable colors, and allows toggling your theme with a hotkey
  4. // @author       Excigma
  5. // @namespace    https://greasyfork.org/users/416480
  6. // @license      GPL-3.0
  7. // @version      0.1.7
  8. // @match        https://bonk.io/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_registerMenuCommand
  11. // @grant        unsafeWindow
  12. // @run-at       document-start
  13. // ==/UserScript==
  14.  
  15. (() => {
  16. 	const configuration_metadata_map = {
  17. 		hotkey: {
  18. 			default_dark: "d",
  19. 			default_light: "d",
  20. 			description: "Hotkey used to toggle the theme on and off\n(Ctrl + Alt + <key>)",
  21. 			datatype: "char"
  22. 		},
  23. 		colored_text: {
  24. 			default_dark: "#40c99e",
  25. 			default_light: "#032a71",
  26. 			description: "Text color of custom games with friends online in the room, and 'Added by' in picks",
  27. 			datatype: "color"
  28. 		},
  29. 		primary_text: {
  30. 			default_dark: "#f8fafd",
  31. 			default_light: "#000000",
  32. 			description: "Primary text color",
  33. 			datatype: "color"
  34. 		},
  35. 		secondary_text: {
  36. 			default_dark: "#bebebe",
  37. 			default_light: "#505050",
  38. 			description: "Secondary text color\nNote: Some of the texts are lightened by 'brightness_lighter' above\nthis will have no affect on such texts (Eg: Chat usernames)",
  39. 			datatype: "color"
  40. 		},
  41. 		window_color: {
  42. 			default_dark: "#2b6351",
  43. 			default_light: "#009688",
  44. 			description: "Color of window titles\n(Eg: Custom games, Leave Game, Chat, Level Select, ...)",
  45. 			datatype: "color"
  46. 		},
  47. 		window_text: {
  48. 			default_dark: "#f8fafd",
  49. 			default_light: "#ffffff",
  50. 			description: "Color of text in window titles\n(Eg: Custom games, Leave Game, Chat, Level Select, ...)",
  51. 			datatype: "color"
  52. 		},
  53. 		page_background: {
  54. 			default_dark: "#111111",
  55. 			default_light: "#1a2733",
  56. 			description: "Used for the main page's background",
  57. 			datatype: "color"
  58. 		},
  59. 		primary_background: {
  60. 			default_dark: "#222222",
  61. 			default_light: "#e2e2e2",
  62. 			description: "Used as the main background color of windows\n(Eg: Chat background, Leave lobby background, Login page)",
  63. 			datatype: "color"
  64. 		},
  65. 		secondary_background: {
  66. 			default_dark: "#333333",
  67. 			default_light: "#f3f3f3",
  68. 			description: "Secondary background color for things inside windows\n(Eg: Auto login, Joining room status text, Map Editor inputs, ...)",
  69. 			datatype: "color"
  70. 		},
  71. 		behind_lobby_background: {
  72. 			default_dark: "#131313",
  73. 			default_light: "#1a2733",
  74. 			description: "Color for the Lobby's background\n(Eg: Behind the Lobby and Map Editor)",
  75. 			datatype: "color"
  76. 		},
  77. 		red_text: {
  78. 			default_dark: "#e14747",
  79. 			default_light: "#cc3333",
  80. 			description: "Used for player nerf indicator in the lobby",
  81. 			datatype: "color"
  82. 		},
  83. 		blue_text: {
  84. 			default_dark: "#179be8",
  85. 			default_light: "#0955c7",
  86. 			description: "Used for [Load] when a map is suggested, and Copy link is clicked",
  87. 			datatype: "color"
  88. 		},
  89. 		green_text: {
  90. 			default_dark: "#17e88b",
  91. 			default_light: "#155824",
  92. 			description: "Used for player buff and in chat friend requests",
  93. 			datatype: "color"
  94. 		},
  95. 		purple_text: {
  96. 			default_dark: "#8f68e8",
  97. 			default_light: "#6033cc",
  98. 			description: "Used for output of /curate",
  99. 			datatype: "color"
  100. 		},
  101. 		magenta_text: {
  102. 			default_dark: "#d23cfb",
  103. 			default_light: "#800d6e",
  104. 			description: "Used for when [Load] is clicked, or when you are now the host of the game",
  105. 			datatype: "color"
  106. 		},
  107. 		button_color: {
  108. 			default_dark: "#4f382f",
  109. 			default_light: "#795548",
  110. 			description: "Button/dropdown color",
  111. 			datatype: "color"
  112. 		},
  113. 		hover_button_color: {
  114. 			default_dark: "#3a2a24",
  115. 			default_light: "#7f5d51",
  116. 			description: "Button/dropdown hover color",
  117. 			datatype: "color"
  118. 		},
  119. 		active_button_color: {
  120. 			default_dark: "#362620",
  121. 			default_light: "#4b252b",
  122. 			description: "Button/dropdown click color",
  123. 			datatype: "color"
  124. 		},
  125. 		disabled_button_color: {
  126. 			default_dark: "#444444",
  127. 			default_light: "#777777",
  128. 			description: "Button/dropdown disabled color",
  129. 			datatype: "color"
  130. 		},
  131. 		button_text: {
  132. 			default_dark: "#f8fafd",
  133. 			default_light: "#ffffff",
  134. 			description: "Button/dropdown text color",
  135. 			datatype: "color"
  136. 		},
  137. 		xp_bar_fill: {
  138. 			default_dark: "#473aaf",
  139. 			default_light: "#473aaf",
  140. 			description: "XP bar fill color at the top of your screen whilst in-game",
  141. 			datatype: "color"
  142. 		},
  143. 		top_bar_opacity: {
  144. 			default_dark: "0.8",
  145. 			default_light: "0.8",
  146. 			description: "Opacity of the 'top bar' that contains your:\nSkin, Username, Level, Volume Settings, ...",
  147. 			datatype: "percentage"
  148. 		},
  149. 		top_bar_color: {
  150. 			default_dark: "#333333",
  151. 			default_light: "#273749",
  152. 			description: "Color of the 'top bar'\nMake sure this value is dark, the icon colors are white and can't really be easily changed",
  153. 			datatype: "color"
  154. 		},
  155. 		top_bar_hover_color: {
  156. 			default_dark: "#222222",
  157. 			default_light: "#2d435a",
  158. 			description: "Color of buttons in the 'top bar' then hovered",
  159. 			datatype: "color"
  160. 		},
  161. 		top_bar_text: {
  162. 			default_dark: "#bebebe",
  163. 			default_light: "#bebebe",
  164. 			description: "Color of text in the 'top bar'",
  165. 			datatype: "color"
  166. 		},
  167. 		football_background: {
  168. 			default_dark: "#161616",
  169. 			default_light: "#5a7f64",
  170. 			description: "Color for the Football gamemode's background\n(Note: Requires restarting the football to apply)\nWarning: Unstable, experimental",
  171. 			datatype: "color"
  172. 		},
  173. 		border_color: {
  174. 			default_dark: "#333333",
  175. 			default_light: "#a5acb0",
  176. 			description: "Color used for subtile borders\n(Eg. Settings border, line separating chat and messages in lobby)",
  177. 			datatype: "color"
  178. 		},
  179. 		mini_menu_color: {
  180. 			default_dark: "#191919",
  181. 			default_light: "#1e2833",
  182. 			description: "Used for Tooltips and 'Filter by' in Custom Games",
  183. 			datatype: "color"
  184. 		},
  185. 		mini_menu_text: {
  186. 			default_dark: "#bebebe",
  187. 			default_light: "#ffffff",
  188. 			description: "Used for Tooltips and 'Filter by' in Custom Games",
  189. 			datatype: "color"
  190. 		},
  191. 		scrollbar_background: {
  192. 			default_dark: "#191919",
  193. 			default_light: "#dddddd",
  194. 			description: "Used for the scrollbar's background (Chromium only)",
  195. 			datatype: "color"
  196. 		},
  197. 		scrollbar_thumb: {
  198. 			default_dark: "#555555",
  199. 			default_light: "#aaaaaa",
  200. 			description: "Used for the scrollbar's thumb - which is the thing you drag (Chromium only)",
  201. 			datatype: "color"
  202. 		},
  203. 		list_headers: {
  204. 			default_dark: "#2b3839",
  205. 			default_light: "#a8bcc0",
  206. 			description: "Used for the colors of lists\n(Eg: Friends list and the sections in the Map Editor, ...)",
  207. 			datatype: "color"
  208. 		},
  209. 		table_color: {
  210. 			default_dark: "#444444",
  211. 			default_light: "#c1cdd2",
  212. 			description: "Stripe color for use in tables\n(Eg: Custom games, Friends list, Map Editor, Skin Editor, ...)",
  213. 			datatype: "color"
  214. 		},
  215. 		table_alt_color: {
  216. 			default_dark: "#333333",
  217. 			default_light: "#d2dbde",
  218. 			description: "Alternative stripe color used in tables",
  219. 			datatype: "color"
  220. 		},
  221. 		table_hover_color: {
  222. 			default_dark: "#222222",
  223. 			default_light: "#aac5d7",
  224. 			description: "Color used when a row in a table is hovered",
  225. 			datatype: "color"
  226. 		},
  227. 		table_active_color: {
  228. 			default_dark: "#111111",
  229. 			default_light: "#9cc8d6",
  230. 			description: "Color used when a row in a table is selected",
  231. 			datatype: "color"
  232. 		},
  233. 		brightness_lighter: {
  234. 			default_dark: "2.5",
  235. 			default_light: "1",
  236. 			description: "Used to lighten text that have bad contrast with dark colors\nNote: Change to 1 if making a light theme\n(0.5 = 50%, 1.5 = 150% brightness)",
  237. 			datatype: "brightness"
  238. 		},
  239. 		brightness_darker: {
  240. 			default_dark: "0.5",
  241. 			default_light: "1",
  242. 			description: "Used to darken images that that are too bright\nNote: Change to 1 if making a light theme\n(0.5 = 50%, 1.5 = 150% brightness)",
  243. 			datatype: "brightness"
  244. 		},
  245. 		description_invert: {
  246. 			default_dark: "1",
  247. 			default_light: "0",
  248. 			description: "How much to invert description at the bottom of the page by\n(Value from 0 to 1, Don't use 0.5)",
  249. 			datatype: "percentage"
  250. 		},
  251. 	};
  252.  
  253. 	const datatype_metadata_map = {
  254. 		"color": {
  255. 			value: "value",
  256. 			attributes: {
  257. 				type: "color"
  258. 			}
  259. 		},
  260. 		"percentage": {
  261. 			value: "value",
  262. 			attributes: {
  263. 				type: "number",
  264. 				max: 1,
  265. 				min: 0,
  266. 				step: 0.01
  267. 			}
  268. 		},
  269. 		"brightness": {
  270. 			value: "value",
  271. 			attributes: {
  272. 				type: "number",
  273. 				max: 10,
  274. 				min: 0,
  275. 				step: 0.05
  276. 			}
  277. 		},
  278. 		"char": {
  279. 			value: "value",
  280. 			attributes: { 
  281. 				type: "text" ,
  282. 				maxLength: 1 
  283. 			}
  284. 		},
  285. 	};
  286.  
  287. 	const default_configuration = {};
  288. 	for (const [key, value] of Object.entries(configuration_metadata_map)) 
  289. 		default_configuration[key] = value.default_dark;
  290. 		
  291. 	// If running inside maingameframe, inject our injectors
  292. 	if (unsafeWindow.parent !== unsafeWindow) {
  293. 		unsafeWindow.bonk_theme = {
  294. 			on: true,
  295. 			get_football_background: () => parseInt(getComputedStyle(document.documentElement)
  296. 				.getPropertyValue("--bonk_theme_football_background").trim().slice(1), 16),
  297. 			get_hotkey: () => getComputedStyle(document.documentElement)
  298. 				.getPropertyValue("--bonk_theme_hotkey").trim() || default_configuration.hotkey
  299. 		};
  300.  
  301. 		// Injector for football mode, if it doesn't work, ...well football will be bright
  302. 		if (!unsafeWindow.bonkCodeInjectors) unsafeWindow.bonkCodeInjectors = [];
  303. 		unsafeWindow.bonkCodeInjectors.push(bonkCode => {
  304. 			try {
  305. 				// Default football background color, not used elsewhere (yet?)
  306. 				const FOOTBALL_BACKGROUND_COLOR = "0x5a7f64";
  307. 				let newBonkCode = bonkCode;
  308. 				newBonkCode = newBonkCode
  309. 					.replace(
  310. 						FOOTBALL_BACKGROUND_COLOR,
  311. 						`(window.bonk_theme.on ? window.bonk_theme.get_football_background() : ${FOOTBALL_BACKGROUND_COLOR})`
  312. 					);
  313. 				if (bonkCode === newBonkCode) throw "[Themes] Injection failed!";
  314.  
  315. 				console.log("Themes injector run");
  316. 				return newBonkCode;
  317. 			} catch (er) {
  318. 				// Silently ignore errors, only football's background will be affected
  319. 				console.log("[Themes] Failed to inject");
  320. 				console.error(er);
  321. 				return bonkCode;
  322. 			}
  323. 		});
  324. 	}
  325.  
  326. 	document.addEventListener("DOMContentLoaded", () => {
  327. 		document.body.classList.add("themed-colors");
  328. 		// Get the currently applied theme
  329. 		const get_stored_theme = () => {
  330. 		// Get the stored theme, if it doesn't exist, it will be null
  331. 			let stored_theme = localStorage.getItem("bonk_theme");
  332. 			try {
  333. 				stored_theme = JSON.parse(stored_theme);
  334. 			} catch (er) {
  335. 			// If the stored theme is somehow corrupted - use blank theme
  336. 				console.log("[Themes] Failed to load theme from localstorage");
  337. 				console.log(`[Themes] ${stored_theme}`);
  338. 				console.error(er);
  339. 				alert("Failed to load theme from localstorage");
  340. 				stored_theme = {};
  341. 			}
  342. 			// Merge the stored theme with the default (if null, it will overwrite)
  343. 			return {...default_configuration, ...stored_theme};
  344. 		};
  345.  
  346. 		// Get the stored theme when the page loads
  347. 		const configuration = get_stored_theme();
  348. 	
  349. 		// Check if the script is running inside maingameframe or not
  350. 		if (unsafeWindow.parent === unsafeWindow) {
  351. 			// Outer bonk.io website
  352. 			// Hotkey to turn the script on and off
  353. 			const maingameframe = document.getElementById("maingameframe");
  354. 			document.addEventListener("keydown", evt => {
  355. 				if (evt.key?.toLowerCase() === maingameframe.contentWindow.bonk_theme.get_hotkey() && evt.ctrlKey && evt.altKey) {			
  356. 					document.body.classList.toggle("themed-colors");
  357. 					maingameframe.contentDocument.body.classList.toggle("themed-colors");
  358. 					maingameframe.contentWindow.bonk_theme.on = !maingameframe.contentWindow.bonk_theme.on;
  359. 				}
  360. 			});
  361.  
  362. 			// Flag to check whether the theme container already exists
  363. 			let theme_container_created = false;
  364. 			// Create the menu only when someone clicks on the thing in the menu
  365. 			// Show the theme container when you click the menu command thing
  366. 			// eslint-disable-next-line no-undef
  367. 			GM_registerMenuCommand("Edit theme", () => {
  368. 				// Creating a new theme_container, don't make new ones after this
  369. 				if (theme_container_created) return document.getElementById("theme_container").style.display = "block";
  370. 				theme_container_created = true;
  371.  
  372. 				// Create the theme menu. This is really ugly but there's like no other way idk.
  373. 				const theme_container = document.createElement("div");
  374. 				const theme_container_title = document.createElement("p");
  375. 				const configuration_container = document.createElement("div");
  376. 				const configuration_container_label = document.createElement("label");
  377. 				const configuration_list = document.createElement("div");
  378. 				const configuration_json = document.createElement("textarea");
  379. 				const configuration_json_label = document.createElement("label");
  380. 				const theme_cancel = document.createElement("div");
  381. 				const theme_save = document.createElement("div");
  382. 				const theme_reset_dark = document.createElement("div");
  383. 				const theme_reset_light = document.createElement("div");
  384. 		
  385. 				// Add the IDs so we can style them with CSS
  386. 				theme_container_title.id = "theme_container_title";
  387. 				theme_container.id = "theme_container";
  388. 				configuration_container_label.id = "configuration_container_label";
  389. 				configuration_list.id = "configuration_list";
  390. 				configuration_json.id = "configuration_json";
  391. 				theme_cancel.id = "theme_cancel";
  392. 				theme_save.id = "theme_save";
  393. 				theme_reset_dark.class = "theme_reset";
  394. 				theme_reset_light.class = "theme_reset";
  395.  
  396. 				// Add the classes
  397. 				theme_container_title.classList.add("classicTopBar");
  398. 				theme_cancel.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  399. 				theme_save.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  400. 				theme_reset_dark.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  401. 				theme_reset_light.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  402.  
  403. 				// Add text to buttons and titles
  404. 				theme_container_title.textContent = "Theme Editor";
  405. 				theme_cancel.textContent = "CANCEL";
  406. 				theme_save.textContent = "SAVE";
  407. 				theme_reset_dark.textContent = "RESET THEME TO DARK PRESET";
  408. 				theme_reset_light.textContent = "RESET THEME TO LIGHT PRESET";
  409. 				configuration_container_label.textContent = "Hover over settings for more info";
  410. 				configuration_json_label.textContent = "Share, Backup or Import theme data - Copy or paste themes from/into the textbox below";
  411. 				configuration_json_label.for = "configuration_json";
  412. 				configuration_json.value = JSON.stringify(configuration);
  413. 				
  414. 				theme_container.appendChild(theme_container_title);
  415.  
  416. 				configuration_list.appendChild(configuration_container_label);
  417. 				configuration_list.appendChild(document.createElement("br"));
  418.  
  419. 				// Populate the themes list with the theme that is currently loaded
  420. 				for (const [key, value] of Object.entries(configuration)) {
  421. 				// Check if the setting exists
  422. 					if (!configuration_metadata_map[key]) continue;
  423. 					const datatype_metadata = datatype_metadata_map[configuration_metadata_map[key].datatype];
  424. 					const configuration_container = document.createElement("div");
  425. 					const configuration_name = document.createElement("p");
  426. 					const configuration_value = document.createElement("input");
  427. 			
  428. 					configuration_container.classList.add("configuration_container");
  429. 					configuration_name.classList.add("configuration_name");
  430. 					configuration_value.classList.add("configuration_value");
  431.  
  432. 					configuration_container.dataset["configuration_name"] = key;
  433. 					configuration_container.title = configuration_metadata_map[key].description ?? "No description";
  434. 					configuration_name.textContent = key.replace(/_/g, " ");
  435.  
  436. 					for (const [key, value] of Object.entries(datatype_metadata.attributes))
  437. 						configuration_value[key] = value;
  438. 					configuration_value[datatype_metadata.value] = value;
  439. 					// Using "oninput" instead of addEventListener so we can call it somewhere else
  440. 					configuration_value.oninput = () => {
  441. 						if (!datatype_metadata.ignore_change) {
  442. 						// Update the CSS variable on both bonk.io and maingameframe
  443. 							document.documentElement.style
  444. 								.setProperty(`--bonk_theme_${key}`, configuration_value.value);
  445. 							maingameframe.contentDocument.documentElement.style
  446. 								.setProperty(`--bonk_theme_${key}`, configuration_value.value);
  447. 							// Store it in the current configuration (so it can be saved later)
  448. 							configuration[key] = configuration_value[datatype_metadata.value];
  449. 						}
  450.  
  451. 						// Update the data at the bottom
  452. 						configuration_json.value = JSON.stringify(configuration);
  453. 					};
  454.  
  455. 					// Add the current config to the list of settings
  456. 					configuration_container.appendChild(configuration_name);
  457. 					configuration_container.appendChild(configuration_value);
  458. 					configuration_list.appendChild(configuration_container);
  459. 				}
  460.  
  461. 				// Add the Save and Cancel buttons
  462. 				configuration_container.appendChild(theme_cancel);
  463. 				configuration_container.appendChild(theme_save);
  464.  
  465. 				configuration_list.appendChild(document.createElement("br")); // this
  466. 				configuration_list.appendChild(configuration_container);
  467. 				configuration_list.appendChild(document.createElement("br")); // is
  468. 				configuration_list.appendChild(configuration_json_label);
  469. 				configuration_list.appendChild(document.createElement("br")); // so
  470. 				configuration_list.appendChild(configuration_json);
  471. 				configuration_list.appendChild(document.createElement("br")); // so
  472. 				configuration_list.appendChild(theme_reset_dark);
  473. 				configuration_list.appendChild(document.createElement("br")); // bad
  474. 				configuration_list.appendChild(theme_reset_light);
  475. 				theme_container.appendChild(configuration_list);
  476.  
  477. 				// When save is clicked, try save theme to localstorage
  478. 				theme_save.addEventListener("click", () => {
  479. 					try {
  480. 						localStorage.setItem("bonk_theme", JSON.stringify(configuration));
  481. 						theme_container.style.display = "none";
  482. 					} catch (er) {
  483. 						console.log("[Themes] Failed to save theme to localstorage");
  484. 						console.log(`[Themes] ${JSON.stringify(configuration)}`);
  485. 						console.error(er);
  486. 						alert("Failed to save theme to localstorage");
  487. 					}
  488. 				});
  489.  
  490. 				// Reset the state of configuration from localstorage
  491. 				theme_cancel.addEventListener("click", () => {
  492. 					configuration_json.value = JSON.stringify(get_stored_theme());
  493. 					configuration_json.oninput();
  494. 					theme_container.style.display = "none";
  495. 				});
  496.  
  497. 				// Get the currently saved theme, and overwrite everything with it
  498. 				theme_reset_dark.addEventListener("click", () => {
  499. 					configuration_json.value = JSON.stringify(default_configuration);
  500. 					configuration_json.oninput();
  501. 				});
  502.  
  503. 				theme_reset_light.addEventListener("click", () => {
  504. 					// Light theme defaults are not calculated by default, so we need to calculate it here now
  505. 					const default_light_configuration = {};
  506. 					for (const [key, value] of Object.entries(configuration_metadata_map)) 
  507. 						default_light_configuration[key] = value.default_light;
  508.  
  509. 					configuration_json.value = JSON.stringify(default_light_configuration);
  510. 					configuration_json.oninput();
  511. 				});
  512.  
  513. 				configuration_json.oninput = () => {
  514. 					try {
  515. 						const new_theme = JSON.parse(configuration_json.value);
  516. 						// Update the configurations
  517. 						const configuration_list_children = Array.from(configuration_list.children);
  518. 						for (const configuration_container of configuration_list_children) {
  519. 							const key = configuration_container.dataset["configuration_name"];
  520. 							const value = new_theme[key];
  521. 							if (!value) continue;
  522.  
  523. 							const configuration_value = configuration_container.querySelector("input");
  524. 							const datatype_meta = datatype_metadata_map[configuration_metadata_map[key].datatype];
  525. 						
  526. 							configuration_value[datatype_meta.value] = value;
  527. 							configuration_value.oninput();
  528. 						}
  529.  
  530. 						// If success, remove the border
  531. 						configuration_json.style.setProperty("border", "none");
  532. 					} catch (er) {
  533. 						console.log("[Themes] Failed to load theme from <textarea>");
  534. 						console.log(`[Themes] ${configuration_json.value}`);
  535. 						console.error(er);
  536. 						// If there is an error, set a red border
  537. 						configuration_json.style.setProperty("border", "3px solid var(--bonk_theme_red)", "important");
  538. 					}
  539. 				};
  540.  
  541. 				// Add the theme dialog to body
  542. 				document.body.appendChild(theme_container);
  543. 			});
  544. 		} else {
  545. 			// This code is for inside maingameframe
  546. 			// Hotkey to turn the script on and off
  547. 			document.addEventListener("keydown", evt => {
  548. 				if (evt.key?.toLowerCase() === unsafeWindow.bonk_theme.get_hotkey() && evt.ctrlKey && evt.altKey) {
  549. 					unsafeWindow.bonk_theme.on = !unsafeWindow.bonk_theme.on;
  550. 					document.body.classList.toggle("themed-colors");
  551. 					unsafeWindow.parent.document.body.classList.toggle("themed-colors");
  552. 				}
  553. 			});
  554. 		}
  555.  
  556. 		// List of default CSS variables
  557. 		let root_vars = [];
  558. 		for (const [key, value] of Object.entries(configuration))
  559. 			root_vars.push(`--bonk_theme_${key}: ${value};`);
  560.  
  561. 		// eslint-disable-next-line no-undef
  562. 		GM_addStyle(`
  563. 	/* CSS Variables, so we can edit their values on the fly */
  564. 	:root {
  565. 		${root_vars.join("\n		")}
  566. 	}
  567.  
  568. 	/* Page background color */
  569. 	.themed-colors #pagecontainer,
  570. 	body.themed-colors { 
  571. 		background-color: var(--bonk_theme_page_background) !important;
  572. 		--kkleeMultiSelectColour: ${configuration.colored_text};
  573. 		--kkleeErrorColour: ${configuration.red_text};
  574. 		--kkleeCheckboxTfsTrue: ${configuration.green_text};
  575. 		--kkleeCheckboxTfsFalse: ${configuration.red_text};
  576. 	}
  577.  
  578. 	/* Dark scroll bar tracks on Firefox and Chromium-based browsers */
  579. 	.themed-colors {
  580. 		scrollbar-color: var(--bonk_theme_scrollbar_thumb) var(--bonk_theme_scrollbar_background) !important;
  581. 	}
  582.  
  583. 	.themed-colors ::-webkit-scrollbar-track {
  584. 		background-color: var(--bonk_theme_scrollbar_background) !important;
  585. 	}
  586.  
  587. 	.themed-colors ::-webkit-scrollbar-thumb { 
  588. 		background-color: var(--bonk_theme_scrollbar_thumb) !important;
  589. 	}
  590.  
  591. 	/* Color tooltips */
  592. 	.themed-colors #friendsToolTip,
  593. 	.themed-colors #pretty_top_replay_report_tooltip,
  594. 	.themed-colors #pretty_top_replay_fav_tooltip,
  595. 	.themed-colors #newbonklobby_tooltip,
  596. 	.themed-colors #mapeditor_rightbox_shapeaddmenucontainer,
  597. 	.themed-colors #mapeditor_leftbox_createmenucontainerleft,
  598. 	.themed-colors #mapeditor_leftbox_createmenucontainerright,
  599. 	.themed-colors #mapeditor_leftbox_copywindow,
  600. 	.themed-colors #mapeditor_rightbox_newjointmenu,
  601. 	.themed-colors .newbonklobby_playerentry_menu,
  602. 	.themed-colors .newbonklobby_playerentry_menu_submenu {
  603. 		background-color: var(--bonk_theme_mini_menu_color) !important;
  604. 		color: var(--bonk_theme_mini_menu_text) !important;
  605. 	}
  606.  
  607. 	/* Color the lobby's background */
  608. 	.themed-colors #bonkiocontainer {
  609. 		background-color: var(--bonk_theme_behind_lobby_background) !important;
  610. 	}
  611. 	
  612. 	/* Dialogs - I can just do windowShadow, but it might break things if new things are added */
  613. 	/* It's better to have a new thing visibly light rather than broken */
  614. 	.themed-colors .bt-primary-background,
  615. 	.themed-colors #autoLoginContainer,
  616. 	.themed-colors #guestOrAccountContainer_accountBox,
  617. 	.themed-colors #guestOrAccountContainer_guestBox,
  618. 	.themed-colors #guestContainer, 
  619. 	.themed-colors .accountContainer,
  620. 	.themed-colors #registerwindow_remember_label,
  621. 	.themed-colors #loginwindow_remember_label,
  622. 	.themed-colors #loginwindow,
  623. 	.themed-colors #registerwindow,
  624. 	.themed-colors #settingsContainer,
  625. 	.themed-colors .settingsHeading,
  626. 	.themed-colors .redefineControls_selectionCell:hover,
  627. 	.themed-colors #newswindow,
  628. 	.themed-colors #skinmanager,
  629. 	.themed-colors .skineditor_shapewindow,
  630. 	.themed-colors .skineditor_shapewindow_imagecontainer,
  631. 	.themed-colors #skineditor_propertiesbox,
  632. 	.themed-colors #skineditor_propertiesbox_table,
  633. 	.themed-colors #skineditor_previewbox,
  634. 	.themed-colors #skineditor_layerbox,
  635. 	.themed-colors #skineditor_layerbox_baselabel,
  636. 	.themed-colors #quickPlayWindow,
  637. 	.themed-colors #roomlistcreatewindow,
  638. 	.themed-colors .roomlistcreatewindowlabel,
  639. 	.themed-colors #roomlistjoinpasswordwindow,
  640. 	.themed-colors #sm_connectingWindow,
  641. 	.themed-colors #newbonklobby_specbox,
  642. 	.themed-colors #newbonklobby_playerbox,
  643. 	.themed-colors #newbonklobby_chatbox,
  644. 	.themed-colors #newbonklobby_settingsbox,
  645. 	.themed-colors #newbonklobby_votewindow,
  646. 	.themed-colors #newbonklobby_votewindow_maptitle,
  647. 	.themed-colors #newbonklobby_votewindow_mapauthor,
  648. 	.themed-colors #leaveconfirmwindow,
  649. 	.themed-colors #leaveconfirmwindow_text2,
  650. 	.themed-colors #hostleaveconfirmwindow,
  651. 	.themed-colors #hostleaveconfirmwindow_text2,
  652. 	.themed-colors #maploadwindow,
  653. 	.themed-colors #maploadwindowgreybar,
  654. 	.themed-colors #maploadwindowstatustext,
  655. 	.themed-colors #mapeditor_leftbox,
  656. 	.themed-colors #mapeditor_midbox,
  657. 	.themed-colors #mapeditor_rightbox,
  658. 	.themed-colors #mapeditor_save_window,
  659. 	.themed-colors #kkleeRoot,
  660. 	.themed-colors #skineditor_colorpicker,
  661. 	.themed-colors #mapeditor_colorpicker,
  662. 	.themed-colors #friendsSendWindow,
  663. 	.themed-colors #roomlistfilterwindow,
  664. 	.themed-colors #ingamecountdown,
  665. 	.themed-colors #mapeditor_save_overwrite_window,
  666. 	#theme_container {
  667. 		background-color: var(--bonk_theme_primary_background) !important;
  668. 		color: var(--bonk_theme_primary_text) !important;
  669. 	}
  670. 	
  671. 	/* Lighter backgrounds for some menus and stuff */
  672. 	.themed-colors .bt-secondary-background,
  673. 	.themed-colors #bonkioheader,
  674. 	.themed-colors .windowTopBar_classic,
  675. 	.themed-colors #autoLogin_text,
  676. 	.themed-colors .guestOrAccountContainerLabelBox,
  677. 	.themed-colors #guest_nametext,
  678. 	.themed-colors #loginwindow_username,
  679. 	.themed-colors #loginwindow_password,
  680. 	.themed-colors #registerwindow_username,
  681. 	.themed-colors #registerwindow_password,
  682. 	.themed-colors #guest_skinbox,
  683. 	.themed-colors #skineditor_propertiesbox_blocker,
  684. 	.themed-colors #newswindow_white,
  685. 	.themed-colors .quickPlayWindowModeDiv,
  686. 	.themed-colors .quickPlayWindowText1,
  687. 	.themed-colors .quickPlayWindowText2,
  688. 	.themed-colors .quickPlayWindowText3,
  689. 	.themed-colors #roomlist,
  690. 	.themed-colors #roomlisttableheadercontainer,
  691. 	.themed-colors .roomlistcreatewindowinput,
  692. 	.themed-colors .whiteInputField,
  693. 	.themed-colors #sm_connectingWindow_text,
  694. 	.themed-colors #friendsContainer,
  695. 	.themed-colors .friends_table,
  696. 	.themed-colors .skinmanager_icon,
  697. 	.themed-colors #maploadwindowsearchinput,
  698. 	.themed-colors .maploadwindowmapdiv,
  699. 	.themed-colors #mapeditor_midbox_explain,
  700. 	.themed-colors #mapeditor_rightbox_namefield,
  701. 	.configuration_value,
  702. 	#configuration_json {
  703. 		border-color: transparent !important;
  704. 		background-color: var(--bonk_theme_secondary_background) !important;
  705. 		color: var(--bonk_theme_primary_text) !important;
  706. 	}
  707. 	
  708. 	.themed-colors .mapeditor_field,
  709. 	.themed-colors .skineditor_field,
  710. 	.themed-colors .mapeditor_rightbox_table_shape_headerfield {
  711. 		border-color: transparent;
  712. 		background-color: var(--bonk_theme_secondary_background);
  713. 		color: var(--bonk_theme_primary_text);
  714. 	}
  715.  
  716. 	.themed-colors .newbonklobby_playerentry_name,
  717. 	.themed-colors #newbonklobby_modetext,
  718. 	.themed-colors #newbonklobby_roundslabel,
  719. 	.themed-colors .maploadwindowtext,
  720. 	.themed-colors #roomliststatustext, 
  721. 	.themed-colors #roomlisttable,
  722. 	.themed-colors .mapeditor_rightbox_table_leftcell,
  723. 	.themed-colors .mapeditor_rightbox_table_rightcell,
  724. 	.themed-colors #ingamecountdown_text,
  725. 	.themed-colors #bonkiobugemail {
  726. 		color: var(--bonk_theme_primary_text) !important;
  727. 	}
  728.  
  729. 	.themed-colors .newbonklobby_mapsuggest_high,
  730. 	.themed-colors .maploadwindowtext_picks,
  731. 	.themed-colors .newbonklobby_chat_msg_name,
  732. 	.themed-colors .newbonklobby_playerentry_balancetext {
  733. 		color: var(--bonk_theme_primary_text);
  734. 	}
  735.  
  736. 	.themed-colors .newbonklobby_playerentry_level,
  737. 	.themed-colors .newbonklobby_playerentry_pingtext, 
  738. 	.themed-colors #newbonklobby_chat_lowerinstruction,
  739. 	.themed-colors #newbonklobby_chat_lowerline, 
  740. 	.themed-colors .newbonklobby_chat_msg_txt,
  741. 	.themed-colors #newbonklobby_chat_input,
  742. 	.themed-colors #newbonklobby_maptext,
  743. 	.themed-colors #newbonklobby_roundsinput,
  744. 	.themed-colors #newbonklobby_mapauthortext,
  745. 	.themed-colors #newbonklobby_votewindow_maptitle_by,
  746. 	.themed-colors #hostleaveconfirmwindow_text1,
  747. 	.themed-colors #leaveconfirmwindow_text1,
  748. 	.themed-colors .maploadwindowtextmode_picks,
  749. 	.themed-colors .maploadwindowtextmode,
  750. 	.themed-colors .maploadwindowtextauthor,
  751. 	.themed-colors .maploadwindowtextauthor_picks,
  752. 	.themed-colors .roomlisttablejoined {
  753. 		color: var(--bonk_theme_secondary_text) !important;
  754. 	}
  755.  
  756. 	/* Lobby chat */
  757. 	.themed-colors .newbonklobby_mapsuggest_low {
  758. 		color: var(--bonk_theme_secondary_text);
  759. 	}
  760.  
  761. 	/* Copy link */
  762. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(9, 85, 199);"],
  763. 	.themed-colors .newbonklobby_chat_link {
  764. 		color: var(--bonk_theme_blue_text) !important;
  765. 	}
  766.  
  767. 	/* /help, player join */
  768. 	.themed-colors .newbonklobby_playerentry_balance_nerf,
  769. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 68, 68);"],
  770. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 51, 51);"],
  771. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(255, 0, 0);"] {
  772. 		color: var(--bonk_theme_red_text) !important;
  773. 	}
  774.  
  775. 	/* Friend requests */
  776. 	.themed-colors .newbonklobby_playerentry_balance_buff,
  777. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(0, 103, 93);"] {
  778. 		color: var(--bonk_theme_green_text) !important;
  779. 	}
  780.  
  781. 	/* /curate */
  782. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(96, 51, 204);"] {
  783. 		color: var(--bonk_theme_purple_text) !important;
  784. 	}
  785.  
  786. 	/* "You are now host" */
  787. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(122, 25, 154);"],
  788. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(128, 13, 110);"] {
  789. 		color: var(--bonk_theme_magenta_text) !important;
  790. 	}
  791.  
  792. 	.themed-colors .newbonklobby_chat_status:not([style]) {
  793. 		filter: brightness(var(--bonk_theme_brightness_lighter)) !important;
  794. 	}
  795.  
  796. 	.themed-colors #descriptioncontainer,
  797. 	.themed-colors #gamethumbbox,
  798. 	.themed-colors #bgreplay {
  799. 		filter: brightness(var(--bonk_theme_brightness_darker)) !important;
  800. 	}
  801.  
  802. 	/* Style sliders and buttons */
  803. 	.themed-colors .compactSlider {
  804. 		background-color: transparent !important;
  805. 		color: var(--bonk_theme_button_text) !important;
  806. 	}
  807.  
  808. 	.themed-colors .brownButton_classic,
  809. 	.themed-colors .dropdown_classic,
  810. 	.themed-colors .skineditor_field_button,
  811. 	.themed-colors .mapeditor_field_button,
  812. 	#theme_save, #theme_cancel, .theme_reset {
  813. 		border-color: transparent !important;
  814. 		background-color: var(--bonk_theme_button_color) !important;
  815. 		color: var(--bonk_theme_button_text) !important;
  816. 	}
  817.  
  818. 	.themed-colors .brownButtonDisabled,
  819. 	.themed-colors .brownButton_disabled_classic,
  820. 	.themed-colors .dropdown-option-disabled {
  821. 		background-color: var(--bonk_theme_disabled_button_color) !important;
  822. 		color: var(--bonk_theme_button_text) !important;
  823. 	}
  824.  
  825. 	.themed-colors .brownButton_classic:hover,
  826. 	.themed-colors .dropdown_classic:hover,
  827. 	#theme_save:hover, #theme_cancel:hover, .theme_reset:hover {
  828. 		background-color: var(--bonk_theme_hover_button_color) !important;
  829. 		color: var(--bonk_theme_button_text) !important;
  830. 	}
  831.  
  832. 	.themed-colors .brownButton_classic:active,
  833. 	.themed-colors .dropdown_classic:active,
  834. 	.themed-colors .newbonklobby_teamlockbutton_warn,
  835. 	#theme_save:active, #theme_cancel:active, .theme_reset:active {
  836. 		background-color: var(--bonk_theme_active_button_color) !important;
  837. 		color: var(--bonk_theme_button_text) !important;
  838. 	}
  839.  
  840. 	/* Tables in the game - Skin editor, Map Editor and Custom game list */
  841. 	.themed-colors #roomlisttable tr:nth-child(odd),
  842. 	.themed-colors .friends_table>tbody:nth-child(odd),
  843. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(odd),
  844. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(odd),
  845. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(odd),
  846. 	.themed-colors #redefineControls_table tr:nth-child(odd),
  847. 	.themed-colors .roomlistfilterwindow_a,
  848. 	.themed-colors #redefineControls_table th {
  849. 		background-color: var(--bonk_theme_table_color) !important;
  850. 		color: var(--bonk_theme_primary_text) !important;
  851. 	}
  852.  
  853. 	.themed-colors #roomlisttable tr:nth-child(even),
  854. 	.themed-colors .friends_table tr:nth-child(even),
  855. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(even),
  856. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(even),
  857. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(even),
  858. 	.themed-colors #redefineControls_table tr:nth-child(even),
  859. 	.themed-colors #roomlisttableheadercontainer,
  860. 	.themed-colors .roomlistfilterwindow_b {
  861. 		background-color: var(--bonk_theme_table_alt_color) !important;
  862. 		color: var(--bonk_theme_primary_text) !important;
  863. 	}
  864.  
  865. 	.themed-colors #roomlisttable tr.FRIENDSPRESENT,
  866. 	.themed-colors .maploadwindowtextaddedby_picks {
  867. 		color: var(--bonk_theme_colored_text) !important;
  868. 	}
  869.  
  870. 	.themed-colors tr.HOVERUNSELECTED:hover td {
  871. 		background-color: var(--bonk_theme_table_hover_color) !important;
  872. 	}
  873.  
  874. 	.themed-colors tr.HOVERSELECTED td,
  875. 	.themed-colors tr.SELECTED td {
  876. 		background-color: var(--bonk_theme_table_active_color) !important;
  877. 	}
  878.  
  879. 	/* "popup" color, custom room list top bar */
  880. 	.themed-colors .bt-titlebar,
  881. 	.themed-colors .windowTopBar_classic, 
  882. 	.themed-colors .classicTopBar,
  883. 	.themed-colors .newbonklobby_boxtop, 
  884. 	.themed-colors .newbonklobby_boxtop_classic,
  885. 	.themed-colors .friends_topbar,
  886. 	.themed-colors #newbonklobby_votewindow_top,
  887. 	.themed-colors #hostleaveconfirmwindow_top,
  888. 	.themed-colors #leaveconfirmwindow_top,
  889. 	.themed-colors #ingamecountdown_top,
  890. 	.themed-colors #roomlisthidepasswordedcheckboxlabel,
  891. 	#theme_container_title {
  892. 		background-color: var(--bonk_theme_window_color) !important;
  893. 		color: var(--bonk_theme_window_text) !important;
  894. 	}
  895.  
  896. 	/* Style the top bar */
  897. 	.themed-colors #pretty_top_bar {
  898. 		background-color: var(--bonk_theme_top_bar_color) !important;
  899. 		opacity: var(--bonk_theme_top_bar_opacity) !important;
  900. 		color: var(--bonk_theme_top_bar_text) !important;
  901. 	}
  902.  
  903. 	.themed-colors .pretty_top_button,
  904. 	.themed-colors #pretty_top_name,
  905. 	.themed-colors #pretty_top_name,
  906. 	.themed-colors #pretty_top_level,
  907. 	.themed-colors #pretty_top_playercount {
  908. 		background-color: var(--bonk_theme_top_bar_color) !important;
  909. 		color: var(--bonk_theme_top_bar_text) !important;
  910. 	}
  911.  
  912. 	.themed-colors .pretty_top_button:hover {
  913. 		background-color: var(--bonk_theme_top_bar_hover_color) !important;
  914. 	}
  915.  
  916. 	/* Invert the Bonk.io description at the bottom of the page */
  917. 	.themed-colors #descriptioninner,
  918. 	.themed-colors #descriptioninner .descriptionthumbr,
  919. 	.themed-colors #descriptioninner .descriptionthumbl {
  920. 		filter: invert(var(--bonk_theme_description_invert)) !important;
  921. 	}
  922.  
  923. 	/* Change color of borders in settings */
  924. 	.themed-colors #redefineControls_table td,
  925. 	.themed-colors #redefineControls_table th,
  926. 	.themed-colors #redefineControls_table {
  927. 		border: 1px solid var(--bonk_theme_border_color) !important;
  928. 	}
  929.  
  930. 	/* Players in lobby */
  931. 	.themed-colors .newbonklobby_playerentry {
  932. 		border-left: 4px solid var(--bonk_theme_primary_background) !important;
  933. 		border-top: 4px solid var(--bonk_theme_primary_background) !important;
  934. 		border-right: 4px solid var(--bonk_theme_primary_background) !important;
  935. 		background-color: var(--bonk_theme_primary_background) !important;
  936. 		color: var(--bonk_theme_primary_text) !important;
  937. 	}
  938.  
  939. 	.themed-colors .newbonklobby_playerentry:hover {
  940. 		border-left: 4px solid var(--bonk_theme_secondary_background) !important;
  941. 		border-top: 4px solid var(--bonk_theme_secondary_background) !important;
  942. 		border-right: 4px solid var(--bonk_theme_secondary_background) !important;
  943. 		background-color: var(--bonk_theme_secondary_background) !important;
  944. 	}
  945.  
  946. 	.themed-colors #newbonklobby_chat_lowerline {
  947. 		border-top: 1px solid var(--bonk_theme_border_color) !important;
  948. 	}
  949.  
  950. 	.themed-colors #newbonklobby_playerbox_middleline {
  951. 		border-left: 1px solid var(--bonk_theme_border_color) !important;
  952. 	}
  953.  
  954. 	/* Headings in the Map Editor and stuff */
  955. 	.themed-colors .friends_titles,
  956. 	.themed-colors .mapeditor_table_heading_div {
  957. 		background-color: var(--bonk_theme_list_headers) !important;
  958. 	}
  959.  
  960. 	/* Change the XP bar to use the colors we want */
  961. 	.themed-colors #xpbarfill {
  962. 		background-color: var(--bonk_theme_xp_bar_fill) !important;
  963. 	}
  964.  
  965. 	/* Below is CSS for our theme editor thing */
  966. 	#theme_container {
  967. 		border-radius: 3px 0px 3px 3px;
  968. 		z-index: 999;
  969. 		font-family: "futurept_b1";
  970. 		padding: 0px;
  971. 		right: 0px;
  972. 		top: 0px;
  973. 		position: fixed;
  974. 		overflow-y: scroll;
  975. 		max-height: 100vh;
  976. 		width: 20em;
  977. 	}
  978.  
  979. 	#configuration_list {
  980. 		padding: 1.5em;
  981. 		display: flex;
  982. 		flex-direction: column;
  983. 	}
  984.  
  985. 	#theme_container_title {
  986. 		text-align: center;
  987. 		margin: 0px;
  988. 		font-size: 20px;
  989. 		line-height: 32px;
  990. 		font-family: "futurept_b1"
  991. 	}
  992.  
  993. 	.configuration_container {
  994. 		white-space: pre-line;
  995. 		display: flex;
  996. 		justify-content: space-between;
  997. 		align-items: center;
  998. 		height: 2.25em;
  999. 	}
  1000.  
  1001. 	.configuration_name {
  1002. 		text-transform: capitalize;
  1003. 		float: left;
  1004. 		width: 70%;
  1005. 	}
  1006.  
  1007. 	.configuration_value {
  1008. 		float: right;
  1009. 		width: 25%;
  1010. 	}
  1011.  
  1012. 	#theme_cancel {
  1013. 		float: left;
  1014. 		width: 45%;
  1015. 	}
  1016.  
  1017. 	#theme_save {
  1018. 		float: right;
  1019. 		width: 45%;
  1020. 	}
  1021.  
  1022. 	#configuration_json {
  1023. 		align-self: center;
  1024. 		resize: none;
  1025. 		width: 100%;
  1026. 		height: 15em;
  1027. 	}
  1028. 	`);
  1029. 	});
  1030. })();