☰

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")); // bad
  472. 				configuration_list.appendChild(theme_reset_dark);
  473. 				configuration_list.appendChild(theme_reset_light);
  474. 				theme_container.appendChild(configuration_list);
  475.  
  476. 				// When save is clicked, try save theme to localstorage
  477. 				theme_save.addEventListener("click", () => {
  478. 					try {
  479. 						localStorage.setItem("bonk_theme", JSON.stringify(configuration));
  480. 						theme_container.style.display = "none";
  481. 					} catch (er) {
  482. 						console.log("[Themes] Failed to save theme to localstorage");
  483. 						console.log(`[Themes] ${JSON.stringify(configuration)}`);
  484. 						console.error(er);
  485. 						alert("Failed to save theme to localstorage");
  486. 					}
  487. 				});
  488.  
  489. 				// Reset the state of configuration from localstorage
  490. 				theme_cancel.addEventListener("click", () => {
  491. 					configuration_json.value = JSON.stringify(get_stored_theme());
  492. 					configuration_json.oninput();
  493. 					theme_container.style.display = "none";
  494. 				});
  495.  
  496. 				// Get the currently saved theme, and overwrite everything with it
  497. 				theme_reset_dark.addEventListener("click", () => {
  498. 					configuration_json.value = JSON.stringify(default_configuration);
  499. 					configuration_json.oninput();
  500. 				});
  501.  
  502. 				theme_reset_light.addEventListener("click", () => {
  503. 					// Light theme defaults are not calculated by default, so we need to calculate it here now
  504. 					const default_light_configuration = {};
  505. 					for (const [key, value] of Object.entries(configuration_metadata_map)) 
  506. 						default_light_configuration[key] = value.default_light;
  507.  
  508. 					configuration_json.value = JSON.stringify(default_light_configuration);
  509. 					configuration_json.oninput();
  510. 				});
  511.  
  512. 				configuration_json.oninput = () => {
  513. 					try {
  514. 						const new_theme = JSON.parse(configuration_json.value);
  515. 						// Update the configurations
  516. 						const configuration_list_children = Array.from(configuration_list.children);
  517. 						for (const configuration_container of configuration_list_children) {
  518. 							const key = configuration_container.dataset["configuration_name"];
  519. 							const value = new_theme[key];
  520. 							if (!value) continue;
  521.  
  522. 							const configuration_value = configuration_container.querySelector("input");
  523. 							const datatype_meta = datatype_metadata_map[configuration_metadata_map[key].datatype];
  524. 						
  525. 							configuration_value[datatype_meta.value] = value;
  526. 							configuration_value.oninput();
  527. 						}
  528.  
  529. 						// If success, remove the border
  530. 						configuration_json.style.setProperty("border", "none");
  531. 					} catch (er) {
  532. 						console.log("[Themes] Failed to load theme from <textarea>");
  533. 						console.log(`[Themes] ${configuration_json.value}`);
  534. 						console.error(er);
  535. 						// If there is an error, set a red border
  536. 						configuration_json.style.setProperty("border", "3px solid var(--bonk_theme_red)", "important");
  537. 					}
  538. 				};
  539.  
  540. 				// Add the theme dialog to body
  541. 				document.body.appendChild(theme_container);
  542. 			});
  543. 		} else {
  544. 			// This code is for inside maingameframe
  545. 			// Hotkey to turn the script on and off
  546. 			document.addEventListener("keydown", evt => {
  547. 				if (evt.key?.toLowerCase() === unsafeWindow.bonk_theme.get_hotkey() && evt.ctrlKey && evt.altKey) {
  548. 					unsafeWindow.bonk_theme.on = !unsafeWindow.bonk_theme.on;
  549. 					document.body.classList.toggle("themed-colors");
  550. 					unsafeWindow.parent.document.body.classList.toggle("themed-colors");
  551. 				}
  552. 			});
  553. 		}
  554.  
  555. 		// List of default CSS variables
  556. 		let root_vars = [];
  557. 		for (const [key, value] of Object.entries(configuration))
  558. 			root_vars.push(`--bonk_theme_${key}: ${value};`);
  559.  
  560. 		// eslint-disable-next-line no-undef
  561. 		GM_addStyle(`
  562. 	/* CSS Variables, so we can edit their values on the fly */
  563. 	:root {
  564. 		${root_vars.join("\n		")}
  565. 	}
  566.  
  567. 	/* Page background color */
  568. 	.themed-colors #pagecontainer,
  569. 	body.themed-colors { 
  570. 		background-color: var(--bonk_theme_page_background) !important;
  571. 		--kkleeMultiSelectColour: ${configuration.colored_text};
  572. 		--kkleeErrorColour: ${configuration.red_text};
  573. 		--kkleeCheckboxTfsTrue: ${configuration.green_text};
  574. 		--kkleeCheckboxTfsFalse: ${configuration.red_text};
  575. 	}
  576.  
  577. 	/* Dark scroll bar tracks on Firefox and Chromium-based browsers */
  578. 	.themed-colors {
  579. 		scrollbar-color: var(--bonk_theme_scrollbar_thumb) var(--bonk_theme_scrollbar_background) !important;
  580. 	}
  581.  
  582. 	.themed-colors ::-webkit-scrollbar-track {
  583. 		background-color: var(--bonk_theme_scrollbar_background) !important;
  584. 	}
  585.  
  586. 	.themed-colors ::-webkit-scrollbar-thumb { 
  587. 		background-color: var(--bonk_theme_scrollbar_thumb) !important;
  588. 	}
  589.  
  590. 	/* Color tooltips */
  591. 	.themed-colors #friendsToolTip,
  592. 	.themed-colors #pretty_top_replay_report_tooltip,
  593. 	.themed-colors #pretty_top_replay_fav_tooltip,
  594. 	.themed-colors #newbonklobby_tooltip,
  595. 	.themed-colors #mapeditor_rightbox_shapeaddmenucontainer,
  596. 	.themed-colors #mapeditor_leftbox_createmenucontainerleft,
  597. 	.themed-colors #mapeditor_leftbox_createmenucontainerright,
  598. 	.themed-colors #mapeditor_leftbox_copywindow,
  599. 	.themed-colors #mapeditor_rightbox_newjointmenu,
  600. 	.themed-colors .newbonklobby_playerentry_menu,
  601. 	.themed-colors .newbonklobby_playerentry_menu_submenu {
  602. 		background-color: var(--bonk_theme_mini_menu_color) !important;
  603. 		color: var(--bonk_theme_mini_menu_text) !important;
  604. 	}
  605.  
  606. 	/* Color the lobby's background */
  607. 	.themed-colors #bonkiocontainer {
  608. 		background-color: var(--bonk_theme_behind_lobby_background) !important;
  609. 	}
  610. 	
  611. 	/* Dialogs - I can just do windowShadow, but it might break things if new things are added */
  612. 	/* It's better to have a new thing visibly light rather than broken */
  613. 	.themed-colors .bt-primary-background,
  614. 	.themed-colors #autoLoginContainer,
  615. 	.themed-colors #guestOrAccountContainer_accountBox,
  616. 	.themed-colors #guestOrAccountContainer_guestBox,
  617. 	.themed-colors #guestContainer, 
  618. 	.themed-colors .accountContainer,
  619. 	.themed-colors #registerwindow_remember_label,
  620. 	.themed-colors #loginwindow_remember_label,
  621. 	.themed-colors #loginwindow,
  622. 	.themed-colors #registerwindow,
  623. 	.themed-colors #settingsContainer,
  624. 	.themed-colors .settingsHeading,
  625. 	.themed-colors .redefineControls_selectionCell:hover,
  626. 	.themed-colors #newswindow,
  627. 	.themed-colors #skinmanager,
  628. 	.themed-colors .skineditor_shapewindow,
  629. 	.themed-colors .skineditor_shapewindow_imagecontainer,
  630. 	.themed-colors #skineditor_propertiesbox,
  631. 	.themed-colors #skineditor_propertiesbox_table,
  632. 	.themed-colors #skineditor_previewbox,
  633. 	.themed-colors #skineditor_layerbox,
  634. 	.themed-colors #skineditor_layerbox_baselabel,
  635. 	.themed-colors #quickPlayWindow,
  636. 	.themed-colors #roomlistcreatewindow,
  637. 	.themed-colors .roomlistcreatewindowlabel,
  638. 	.themed-colors #roomlistjoinpasswordwindow,
  639. 	.themed-colors #sm_connectingWindow,
  640. 	.themed-colors #newbonklobby_specbox,
  641. 	.themed-colors #newbonklobby_playerbox,
  642. 	.themed-colors #newbonklobby_chatbox,
  643. 	.themed-colors #newbonklobby_settingsbox,
  644. 	.themed-colors #newbonklobby_votewindow,
  645. 	.themed-colors #newbonklobby_votewindow_maptitle,
  646. 	.themed-colors #newbonklobby_votewindow_mapauthor,
  647. 	.themed-colors #leaveconfirmwindow,
  648. 	.themed-colors #leaveconfirmwindow_text2,
  649. 	.themed-colors #hostleaveconfirmwindow,
  650. 	.themed-colors #hostleaveconfirmwindow_text2,
  651. 	.themed-colors #maploadwindow,
  652. 	.themed-colors #maploadwindowgreybar,
  653. 	.themed-colors #maploadwindowstatustext,
  654. 	.themed-colors #mapeditor_leftbox,
  655. 	.themed-colors #mapeditor_midbox,
  656. 	.themed-colors #mapeditor_rightbox,
  657. 	.themed-colors #mapeditor_save_window,
  658. 	.themed-colors #kkleeRoot,
  659. 	.themed-colors #skineditor_colorpicker,
  660. 	.themed-colors #mapeditor_colorpicker,
  661. 	.themed-colors #friendsSendWindow,
  662. 	.themed-colors #roomlistfilterwindow,
  663. 	.themed-colors #ingamecountdown,
  664. 	.themed-colors #mapeditor_save_overwrite_window,
  665. 	#theme_container {
  666. 		background-color: var(--bonk_theme_primary_background) !important;
  667. 		color: var(--bonk_theme_primary_text) !important;
  668. 	}
  669. 	
  670. 	/* Lighter backgrounds for some menus and stuff */
  671. 	.themed-colors .bt-secondary-background,
  672. 	.themed-colors #bonkioheader,
  673. 	.themed-colors .windowTopBar_classic,
  674. 	.themed-colors #autoLogin_text,
  675. 	.themed-colors .guestOrAccountContainerLabelBox,
  676. 	.themed-colors #guest_nametext,
  677. 	.themed-colors #loginwindow_username,
  678. 	.themed-colors #loginwindow_password,
  679. 	.themed-colors #registerwindow_username,
  680. 	.themed-colors #registerwindow_password,
  681. 	.themed-colors #guest_skinbox,
  682. 	.themed-colors #skineditor_propertiesbox_blocker,
  683. 	.themed-colors #newswindow_white,
  684. 	.themed-colors .quickPlayWindowModeDiv,
  685. 	.themed-colors .quickPlayWindowText1,
  686. 	.themed-colors .quickPlayWindowText2,
  687. 	.themed-colors .quickPlayWindowText3,
  688. 	.themed-colors #roomlist,
  689. 	.themed-colors #roomlisttableheadercontainer,
  690. 	.themed-colors .roomlistcreatewindowinput,
  691. 	.themed-colors .whiteInputField,
  692. 	.themed-colors #sm_connectingWindow_text,
  693. 	.themed-colors #friendsContainer,
  694. 	.themed-colors .friends_table,
  695. 	.themed-colors .skinmanager_icon,
  696. 	.themed-colors #maploadwindowsearchinput,
  697. 	.themed-colors .maploadwindowmapdiv,
  698. 	.themed-colors #mapeditor_midbox_explain,
  699. 	.themed-colors #mapeditor_rightbox_namefield,
  700. 	.configuration_value,
  701. 	#configuration_json {
  702. 		border-color: transparent !important;
  703. 		background-color: var(--bonk_theme_secondary_background) !important;
  704. 		color: var(--bonk_theme_primary_text) !important;
  705. 	}
  706. 	
  707. 	.themed-colors .mapeditor_field,
  708. 	.themed-colors .skineditor_field,
  709. 	.themed-colors .mapeditor_rightbox_table_shape_headerfield {
  710. 		border-color: transparent;
  711. 		background-color: var(--bonk_theme_secondary_background);
  712. 		color: var(--bonk_theme_primary_text);
  713. 	}
  714.  
  715. 	.themed-colors .newbonklobby_playerentry_name,
  716. 	.themed-colors #newbonklobby_modetext,
  717. 	.themed-colors #newbonklobby_roundslabel,
  718. 	.themed-colors .maploadwindowtext,
  719. 	.themed-colors #roomliststatustext, 
  720. 	.themed-colors #roomlisttable,
  721. 	.themed-colors .mapeditor_rightbox_table_leftcell,
  722. 	.themed-colors .mapeditor_rightbox_table_rightcell,
  723. 	.themed-colors #ingamecountdown_text,
  724. 	.themed-colors #bonkiobugemail {
  725. 		color: var(--bonk_theme_primary_text) !important;
  726. 	}
  727.  
  728. 	.themed-colors .newbonklobby_mapsuggest_high,
  729. 	.themed-colors .maploadwindowtext_picks,
  730. 	.themed-colors .newbonklobby_chat_msg_name,
  731. 	.themed-colors .newbonklobby_playerentry_balancetext {
  732. 		color: var(--bonk_theme_primary_text);
  733. 	}
  734.  
  735. 	.themed-colors .newbonklobby_playerentry_level,
  736. 	.themed-colors .newbonklobby_playerentry_pingtext, 
  737. 	.themed-colors #newbonklobby_chat_lowerinstruction,
  738. 	.themed-colors #newbonklobby_chat_lowerline, 
  739. 	.themed-colors .newbonklobby_chat_msg_txt,
  740. 	.themed-colors #newbonklobby_chat_input,
  741. 	.themed-colors #newbonklobby_maptext,
  742. 	.themed-colors #newbonklobby_roundsinput,
  743. 	.themed-colors #newbonklobby_mapauthortext,
  744. 	.themed-colors #newbonklobby_votewindow_maptitle_by,
  745. 	.themed-colors #hostleaveconfirmwindow_text1,
  746. 	.themed-colors #leaveconfirmwindow_text1,
  747. 	.themed-colors .maploadwindowtextmode_picks,
  748. 	.themed-colors .maploadwindowtextmode,
  749. 	.themed-colors .maploadwindowtextauthor,
  750. 	.themed-colors .maploadwindowtextauthor_picks,
  751. 	.themed-colors .roomlisttablejoined {
  752. 		color: var(--bonk_theme_secondary_text) !important;
  753. 	}
  754.  
  755. 	/* Lobby chat */
  756. 	.themed-colors .newbonklobby_mapsuggest_low {
  757. 		color: var(--bonk_theme_secondary_text);
  758. 	}
  759.  
  760. 	/* Copy link */
  761. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(9, 85, 199);"],
  762. 	.themed-colors .newbonklobby_chat_link {
  763. 		color: var(--bonk_theme_blue_text) !important;
  764. 	}
  765.  
  766. 	/* /help, player join */
  767. 	.themed-colors .newbonklobby_playerentry_balance_nerf,
  768. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 68, 68);"],
  769. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 51, 51);"],
  770. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(255, 0, 0);"] {
  771. 		color: var(--bonk_theme_red_text) !important;
  772. 	}
  773.  
  774. 	/* Friend requests */
  775. 	.themed-colors .newbonklobby_playerentry_balance_buff,
  776. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(0, 103, 93);"] {
  777. 		color: var(--bonk_theme_green_text) !important;
  778. 	}
  779.  
  780. 	/* /curate */
  781. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(96, 51, 204);"] {
  782. 		color: var(--bonk_theme_purple_text) !important;
  783. 	}
  784.  
  785. 	/* "You are now host" */
  786. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(122, 25, 154);"],
  787. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(128, 13, 110);"] {
  788. 		color: var(--bonk_theme_magenta_text) !important;
  789. 	}
  790.  
  791. 	.themed-colors .newbonklobby_chat_status:not([style]) {
  792. 		filter: brightness(var(--bonk_theme_brightness_lighter)) !important;
  793. 	}
  794.  
  795. 	.themed-colors #descriptioncontainer,
  796. 	.themed-colors #gamethumbbox,
  797. 	.themed-colors #bgreplay {
  798. 		filter: brightness(var(--bonk_theme_brightness_darker)) !important;
  799. 	}
  800.  
  801. 	/* Style sliders and buttons */
  802. 	.themed-colors .compactSlider {
  803. 		background-color: transparent !important;
  804. 		color: var(--bonk_theme_button_text) !important;
  805. 	}
  806.  
  807. 	.themed-colors .brownButton_classic,
  808. 	.themed-colors .dropdown_classic,
  809. 	.themed-colors .skineditor_field_button,
  810. 	.themed-colors .mapeditor_field_button,
  811. 	#theme_save, #theme_cancel, .theme_reset {
  812. 		border-color: transparent !important;
  813. 		background-color: var(--bonk_theme_button_color) !important;
  814. 		color: var(--bonk_theme_button_text) !important;
  815. 	}
  816.  
  817. 	.themed-colors .brownButtonDisabled,
  818. 	.themed-colors .brownButton_disabled_classic,
  819. 	.themed-colors .dropdown-option-disabled {
  820. 		background-color: var(--bonk_theme_disabled_button_color) !important;
  821. 		color: var(--bonk_theme_button_text) !important;
  822. 	}
  823.  
  824. 	.themed-colors .brownButton_classic:hover,
  825. 	.themed-colors .dropdown_classic:hover,
  826. 	#theme_save:hover, #theme_cancel:hover, .theme_reset:hover {
  827. 		background-color: var(--bonk_theme_hover_button_color) !important;
  828. 		color: var(--bonk_theme_button_text) !important;
  829. 	}
  830.  
  831. 	.themed-colors .brownButton_classic:active,
  832. 	.themed-colors .dropdown_classic:active,
  833. 	.themed-colors .newbonklobby_teamlockbutton_warn,
  834. 	#theme_save:active, #theme_cancel:active, .theme_reset:active {
  835. 		background-color: var(--bonk_theme_active_button_color) !important;
  836. 		color: var(--bonk_theme_button_text) !important;
  837. 	}
  838.  
  839. 	/* Tables in the game - Skin editor, Map Editor and Custom game list */
  840. 	.themed-colors #roomlisttable tr:nth-child(odd),
  841. 	.themed-colors .friends_table>tbody:nth-child(odd),
  842. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(odd),
  843. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(odd),
  844. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(odd),
  845. 	.themed-colors #redefineControls_table tr:nth-child(odd),
  846. 	.themed-colors .roomlistfilterwindow_a,
  847. 	.themed-colors #redefineControls_table th {
  848. 		background-color: var(--bonk_theme_table_color) !important;
  849. 		color: var(--bonk_theme_primary_text) !important;
  850. 	}
  851.  
  852. 	.themed-colors #roomlisttable tr:nth-child(even),
  853. 	.themed-colors .friends_table tr:nth-child(even),
  854. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(even),
  855. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(even),
  856. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(even),
  857. 	.themed-colors #redefineControls_table tr:nth-child(even),
  858. 	.themed-colors #roomlisttableheadercontainer,
  859. 	.themed-colors .roomlistfilterwindow_b {
  860. 		background-color: var(--bonk_theme_table_alt_color) !important;
  861. 		color: var(--bonk_theme_primary_text) !important;
  862. 	}
  863.  
  864. 	.themed-colors #roomlisttable tr.FRIENDSPRESENT,
  865. 	.themed-colors .maploadwindowtextaddedby_picks {
  866. 		color: var(--bonk_theme_colored_text) !important;
  867. 	}
  868.  
  869. 	.themed-colors tr.HOVERUNSELECTED:hover td {
  870. 		background-color: var(--bonk_theme_table_hover_color) !important;
  871. 	}
  872.  
  873. 	.themed-colors tr.HOVERSELECTED td,
  874. 	.themed-colors tr.SELECTED td {
  875. 		background-color: var(--bonk_theme_table_active_color) !important;
  876. 	}
  877.  
  878. 	/* "popup" color, custom room list top bar */
  879. 	.themed-colors .bt-titlebar,
  880. 	.themed-colors .windowTopBar_classic, 
  881. 	.themed-colors .classicTopBar,
  882. 	.themed-colors .newbonklobby_boxtop, 
  883. 	.themed-colors .newbonklobby_boxtop_classic,
  884. 	.themed-colors .friends_topbar,
  885. 	.themed-colors #newbonklobby_votewindow_top,
  886. 	.themed-colors #hostleaveconfirmwindow_top,
  887. 	.themed-colors #leaveconfirmwindow_top,
  888. 	.themed-colors #ingamecountdown_top,
  889. 	.themed-colors #roomlisthidepasswordedcheckboxlabel,
  890. 	#theme_container_title {
  891. 		background-color: var(--bonk_theme_window_color) !important;
  892. 		color: var(--bonk_theme_window_text) !important;
  893. 	}
  894.  
  895. 	/* Style the top bar */
  896. 	.themed-colors #pretty_top_bar {
  897. 		background-color: var(--bonk_theme_top_bar_color) !important;
  898. 		opacity: var(--bonk_theme_top_bar_opacity) !important;
  899. 		color: var(--bonk_theme_top_bar_text) !important;
  900. 	}
  901.  
  902. 	.themed-colors .pretty_top_button,
  903. 	.themed-colors #pretty_top_name,
  904. 	.themed-colors #pretty_top_name,
  905. 	.themed-colors #pretty_top_level,
  906. 	.themed-colors #pretty_top_playercount {
  907. 		background-color: var(--bonk_theme_top_bar_color) !important;
  908. 		color: var(--bonk_theme_top_bar_text) !important;
  909. 	}
  910.  
  911. 	.themed-colors .pretty_top_button:hover {
  912. 		background-color: var(--bonk_theme_top_bar_hover_color) !important;
  913. 	}
  914.  
  915. 	/* Invert the Bonk.io description at the bottom of the page */
  916. 	.themed-colors #descriptioninner,
  917. 	.themed-colors #descriptioninner .descriptionthumbr,
  918. 	.themed-colors #descriptioninner .descriptionthumbl {
  919. 		filter: invert(var(--bonk_theme_description_invert)) !important;
  920. 	}
  921.  
  922. 	/* Change color of borders in settings */
  923. 	.themed-colors #redefineControls_table td,
  924. 	.themed-colors #redefineControls_table th,
  925. 	.themed-colors #redefineControls_table {
  926. 		border: 1px solid var(--bonk_theme_border_color) !important;
  927. 	}
  928.  
  929. 	/* Players in lobby */
  930. 	.themed-colors .newbonklobby_playerentry {
  931. 		border-left: 4px solid var(--bonk_theme_primary_background) !important;
  932. 		border-top: 4px solid var(--bonk_theme_primary_background) !important;
  933. 		border-right: 4px solid var(--bonk_theme_primary_background) !important;
  934. 		background-color: var(--bonk_theme_primary_background) !important;
  935. 		color: var(--bonk_theme_primary_text) !important;
  936. 	}
  937.  
  938. 	.themed-colors .newbonklobby_playerentry:hover {
  939. 		border-left: 4px solid var(--bonk_theme_secondary_background) !important;
  940. 		border-top: 4px solid var(--bonk_theme_secondary_background) !important;
  941. 		border-right: 4px solid var(--bonk_theme_secondary_background) !important;
  942. 		background-color: var(--bonk_theme_secondary_background) !important;
  943. 	}
  944.  
  945. 	.themed-colors #newbonklobby_chat_lowerline {
  946. 		border-top: 1px solid var(--bonk_theme_border_color) !important;
  947. 	}
  948.  
  949. 	.themed-colors #newbonklobby_playerbox_middleline {
  950. 		border-left: 1px solid var(--bonk_theme_border_color) !important;
  951. 	}
  952.  
  953. 	/* Headings in the Map Editor and stuff */
  954. 	.themed-colors .friends_titles,
  955. 	.themed-colors .mapeditor_table_heading_div {
  956. 		background-color: var(--bonk_theme_list_headers) !important;
  957. 	}
  958.  
  959. 	/* Change the XP bar to use the colors we want */
  960. 	.themed-colors #xpbarfill {
  961. 		background-color: var(--bonk_theme_xp_bar_fill) !important;
  962. 	}
  963.  
  964. 	/* Below is CSS for our theme editor thing */
  965. 	#theme_container {
  966. 		border-radius: 3px 0px 3px 3px;
  967. 		z-index: 999;
  968. 		font-family: "futurept_b1";
  969. 		padding: 0px;
  970. 		right: 0px;
  971. 		top: 0px;
  972. 		position: fixed;
  973. 		overflow-y: scroll;
  974. 		max-height: 100vh;
  975. 		width: 20em;
  976. 	}
  977.  
  978. 	#configuration_list {
  979. 		padding: 1.5em;
  980. 		display: flex;
  981. 		flex-direction: column;
  982. 	}
  983.  
  984. 	#theme_container_title {
  985. 		text-align: center;
  986. 		margin: 0px;
  987. 		font-size: 20px;
  988. 		line-height: 32px;
  989. 		font-family: "futurept_b1"
  990. 	}
  991.  
  992. 	.configuration_container {
  993. 		white-space: pre-line;
  994. 		display: flex;
  995. 		justify-content: space-between;
  996. 		align-items: center;
  997. 		height: 2.25em;
  998. 	}
  999.  
  1000. 	.configuration_name {
  1001. 		text-transform: capitalize;
  1002. 		float: left;
  1003. 		width: 70%;
  1004. 	}
  1005.  
  1006. 	.configuration_value {
  1007. 		float: right;
  1008. 		width: 25%;
  1009. 	}
  1010.  
  1011. 	#theme_cancel {
  1012. 		float: left;
  1013. 	}
  1014.  
  1015. 	#theme_save {
  1016. 		float: right;
  1017. 	}
  1018.  
  1019. 	#theme_save,
  1020. 	#theme_cancel {
  1021. 		width: 45%;
  1022. 		height: 30px;
  1023. 		line-height: 30px;
  1024. 	}
  1025.  
  1026. 	#configuration_json {
  1027. 		align-self: center;
  1028. 		resize: none;
  1029. 		width: 100%;
  1030. 		height: 15em;
  1031. 	}
  1032. 	`);
  1033. 	});
  1034. })();