☰

Themes - Bonk.io

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

目前为 2021-12-12 提交的版本。查看 最新版本。

  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.22
  8. // @match        https://bonk.io/*
  9. // @require      https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js
  10. // @grant        GM_addStyle
  11. // @grant        GM_registerMenuCommand
  12. // @grant        unsafeWindow
  13. // @run-at       document-start
  14. // ==/UserScript==
  15.  
  16. (() => {
  17. 	const configuration_metadata_map = {
  18. 		hotkey: {
  19. 			default_dark: "d",
  20. 			default_light: "d",
  21. 			description: "Hotkey used to toggle the theme on and off\n(Ctrl + Alt + <key>) or (Ctrl + Shift + <key>)",
  22. 			datatype: "char"
  23. 		},
  24. 		colored_text: {
  25. 			default_dark: "#40c99e",
  26. 			default_light: "#032a71",
  27. 			description: "Text color of Custom game rooms with friends online in the room, and 'Added by' in picks",
  28. 			datatype: "color"
  29. 		},
  30. 		primary_text: {
  31. 			default_dark: "#f8fafd",
  32. 			default_light: "#000000",
  33. 			description: "Primary text color",
  34. 			datatype: "color"
  35. 		},
  36. 		secondary_text: {
  37. 			default_dark: "#bebebe",
  38. 			default_light: "#505050",
  39. 			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)",
  40. 			datatype: "color"
  41. 		},
  42. 		text_selection_color: {
  43. 			default_dark: "#7c7c7c",
  44. 			default_light: "#338fff",
  45. 			description: "Background of text when it is selected",
  46. 			datatype: "color"
  47. 		},
  48. 		text_selection_text: {
  49. 			default_dark: "#f8fafd",
  50. 			default_light: "#f8fafd",
  51. 			description: "Text color when text is selected",
  52. 			datatype: "color"
  53. 		},
  54. 		window_color: {
  55. 			default_dark: "#2b6351",
  56. 			default_light: "#009688",
  57. 			description: "Color of window titles\n(Eg: Custom games, Leave Game, Chat, Level Select, ...)",
  58. 			datatype: "color"
  59. 		},
  60. 		window_text: {
  61. 			default_dark: "#f8fafd",
  62. 			default_light: "#ffffff",
  63. 			description: "Color of text in window titles\n(Eg: Custom games, Leave Game, Chat, Level Select, ...)",
  64. 			datatype: "color"
  65. 		},
  66. 		page_background: {
  67. 			default_dark: "#111111",
  68. 			default_light: "#1a2733",
  69. 			description: "Used for the main page's background",
  70. 			datatype: "color"
  71. 		},
  72. 		primary_background: {
  73. 			default_dark: "#222222",
  74. 			default_light: "#e2e2e2",
  75. 			description: "Used as the main background color of windows\n(Eg: Chat background, Leave lobby background, Login page)",
  76. 			datatype: "color"
  77. 		},
  78. 		secondary_background: {
  79. 			default_dark: "#333333",
  80. 			default_light: "#f3f3f3",
  81. 			description: "Secondary background color for things inside windows\n(Eg: Auto login, Joining room status text, Map Editor inputs, ...)",
  82. 			datatype: "color"
  83. 		},
  84. 		behind_lobby_background: {
  85. 			default_dark: "#131313",
  86. 			default_light: "#1a2733",
  87. 			description: "Color for the Lobby's background\n(Eg: Behind the Lobby and Map Editor)",
  88. 			datatype: "color"
  89. 		},
  90. 		red_text: {
  91. 			default_dark: "#e14747",
  92. 			default_light: "#cc3333",
  93. 			description: "Used for player nerf indicator in the lobby",
  94. 			datatype: "color"
  95. 		},
  96. 		blue_text: {
  97. 			default_dark: "#179be8",
  98. 			default_light: "#0955c7",
  99. 			description: "Used for [Load] when a map is suggested, and Copy link is clicked",
  100. 			datatype: "color"
  101. 		},
  102. 		green_text: {
  103. 			default_dark: "#17e88b",
  104. 			default_light: "#155824",
  105. 			description: "Used for player buff and in chat friend requests",
  106. 			datatype: "color"
  107. 		},
  108. 		purple_text: {
  109. 			default_dark: "#8f68e8",
  110. 			default_light: "#6033cc",
  111. 			description: "Used for output of /curate",
  112. 			datatype: "color"
  113. 		},
  114. 		magenta_text: {
  115. 			default_dark: "#d23cfb",
  116. 			default_light: "#800d6e",
  117. 			description: "Used for when [Load] is clicked, or when you are now the host of the game",
  118. 			datatype: "color"
  119. 		},
  120. 		button_color: {
  121. 			default_dark: "#4f382f",
  122. 			default_light: "#795548",
  123. 			description: "Button/dropdown color",
  124. 			datatype: "color"
  125. 		},
  126. 		button_outline_color: {
  127. 			default_dark: "#4f382f00",
  128. 			default_light: "#79554800",
  129. 			description: "Button/dropdown outline color",
  130. 			datatype: "color"
  131. 		},
  132. 		hover_button_color: {
  133. 			default_dark: "#3a2a24",
  134. 			default_light: "#7f5d51",
  135. 			description: "Button/dropdown hover color",
  136. 			datatype: "color"
  137. 		},
  138. 		active_button_color: {
  139. 			default_dark: "#362620",
  140. 			default_light: "#4b252b",
  141. 			description: "Button/dropdown click color",
  142. 			datatype: "color"
  143. 		},
  144. 		disabled_button_color: {
  145. 			default_dark: "#444444",
  146. 			default_light: "#777777",
  147. 			description: "Button/dropdown disabled color",
  148. 			datatype: "color"
  149. 		},
  150. 		button_text: {
  151. 			default_dark: "#f8fafd",
  152. 			default_light: "#ffffff",
  153. 			description: "Button/dropdown text color",
  154. 			datatype: "color"
  155. 		},
  156. 		// button_radius: {
  157. 		// 	default_dark: "2",
  158. 		// 	default_light: "2",
  159. 		// 	description: "Button/dropdown radius",
  160. 		// 	datatype: "radius"
  161. 		// },
  162. 		xp_bar_fill: {
  163. 			default_dark: "#473aaf",
  164. 			default_light: "#473aaf",
  165. 			description: "XP bar fill color at the top of your screen whilst in-game",
  166. 			datatype: "color"
  167. 		},
  168. 		bonk_header_color: {
  169. 			default_dark: "#333333",
  170. 			default_light: "#000000",
  171. 			description: "Color of the bonk.io header at the top of the page",
  172. 			datatype: "color"
  173. 		},
  174. 		bonk_header_text: {
  175. 			default_dark: "#bebebe",
  176. 			default_light: "#4c474a",
  177. 			description: "Color of the text in the bonk.io header at the top of the page",
  178. 			datatype: "color"
  179. 		},
  180. 		top_bar_color: {
  181. 			default_dark: "#333333c7",
  182. 			default_light: "#273749c7",
  183. 			description: "Color of the 'top bar'\nMake sure this value is dark, the icon colors are white and can't really be easily changed",
  184. 			datatype: "color"
  185. 		},
  186. 		top_bar_hover_color: {
  187. 			default_dark: "#222222",
  188. 			default_light: "#2d435a",
  189. 			description: "Color of buttons in the 'top bar' when hovered",
  190. 			datatype: "color"
  191. 		},
  192. 		top_bar_active_color: {
  193. 			default_dark: "#191919",
  194. 			default_light: "#1e2c3c",
  195. 			description: "Color of buttons in the 'top bar' when active",
  196. 			datatype: "color"
  197. 		},
  198. 		top_bar_text: {
  199. 			default_dark: "#bebebe",
  200. 			default_light: "#bebebe",
  201. 			description: "Color of text in the 'top bar'",
  202. 			datatype: "color"
  203. 		},
  204. 		football_background: {
  205. 			default_dark: "#161616",
  206. 			default_light: "#5a7f64",
  207. 			description: "Color for the Football gamemode's background\n(Note: Requires restarting the football to apply)\nWarning: Unstable, experimental",
  208. 			datatype: "color"
  209. 		},
  210. 		border_color: {
  211. 			default_dark: "#333333",
  212. 			default_light: "#a5acb0",
  213. 			description: "Color used for subtile borders\n(Eg. Settings border, line separating chat and messages in lobby, and Skin Editor shadows)",
  214. 			datatype: "color"
  215. 		},
  216. 		mini_menu_color: {
  217. 			default_dark: "#191919",
  218. 			default_light: "#1e2833",
  219. 			description: "Used for Tooltips and 'Filter by' in Custom Games",
  220. 			datatype: "color"
  221. 		},
  222. 		mini_menu_text: {
  223. 			default_dark: "#bebebe",
  224. 			default_light: "#ffffff",
  225. 			description: "Used for Tooltips and 'Filter by' in Custom Games",
  226. 			datatype: "color"
  227. 		},
  228. 		scrollbar_background: {
  229. 			default_dark: "#191919",
  230. 			default_light: "#dddddd",
  231. 			description: "Used for the scrollbar's background (Chromium only)",
  232. 			datatype: "color"
  233. 		},
  234. 		scrollbar_thumb: {
  235. 			default_dark: "#555555",
  236. 			default_light: "#aaaaaa",
  237. 			description: "Used for the scrollbar's thumb - which is the thing you drag (Chromium only)",
  238. 			datatype: "color"
  239. 		},
  240. 		list_headers: {
  241. 			default_dark: "#2b3839",
  242. 			default_light: "#a8bcc0",
  243. 			description: "Used for the colors of lists\n(Eg: Friends list and the sections in the Map Editor, ...)",
  244. 			datatype: "color"
  245. 		},
  246. 		table_color: {
  247. 			default_dark: "#444444",
  248. 			default_light: "#c1cdd2",
  249. 			description: "Stripe color for use in tables\n(Eg: Custom games, Friends list, Map Editor, Skin Editor, ...)",
  250. 			datatype: "color"
  251. 		},
  252. 		table_alt_color: {
  253. 			default_dark: "#333333",
  254. 			default_light: "#d2dbde",
  255. 			description: "Alternative stripe color used in tables",
  256. 			datatype: "color"
  257. 		},
  258. 		table_hover_color: {
  259. 			default_dark: "#222222",
  260. 			default_light: "#aac5d7",
  261. 			description: "Color used when a row in a table is hovered",
  262. 			datatype: "color"
  263. 		},
  264. 		table_active_color: {
  265. 			default_dark: "#111111",
  266. 			default_light: "#9cc8d6",
  267. 			description: "Color used when a row in a table is selected",
  268. 			datatype: "color"
  269. 		},
  270. 		brightness_lighter: {
  271. 			default_dark: "2.5",
  272. 			default_light: "1",
  273. 			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)",
  274. 			datatype: "brightness"
  275. 		},
  276. 		brightness_darker: {
  277. 			default_dark: "0.6",
  278. 			default_light: "1",
  279. 			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)",
  280. 			datatype: "brightness"
  281. 		}
  282. 	};
  283.  
  284. 	const datatype_metadata_map = {
  285. 		"color": {
  286. 			value: "value",
  287. 			attributes: {
  288. 				type: "text",
  289. 				"data-jscolor": ""
  290. 			}
  291. 		},
  292. 		"percentage": {
  293. 			value: "value",
  294. 			attributes: {
  295. 				type: "number",
  296. 				max: 1,
  297. 				min: 0,
  298. 				step: 0.01
  299. 			}
  300. 		},
  301. 		"brightness": {
  302. 			value: "value",
  303. 			attributes: {
  304. 				type: "number",
  305. 				max: 10,
  306. 				min: 0,
  307. 				step: 0.05
  308. 			}
  309. 		},
  310. 		"radius": {
  311. 			value: "value",
  312. 			attributes: {
  313. 				type: "number",
  314. 				max: 60,
  315. 				min: 0,
  316. 				step: 1
  317. 			}
  318. 		},
  319. 		"char": {
  320. 			value: "value",
  321. 			attributes: { 
  322. 				type: "text" ,
  323. 				maxLength: 1 
  324. 			}
  325. 		},
  326. 	};
  327.  
  328. 	const default_configuration = {};
  329. 	for (const [key, value] of Object.entries(configuration_metadata_map)) 
  330. 		default_configuration[key] = value.default_dark;
  331.  
  332. 	// Get the currently applied theme
  333. 	const get_stored_configuration = () => {
  334. 		// Get the stored theme, if it doesn't exist, it will be null
  335. 		let stored_theme = localStorage.getItem("bonk_theme");
  336. 		try {
  337. 			stored_theme = JSON.parse(stored_theme);
  338. 		} catch (er) {
  339. 			// If the stored theme is somehow corrupted - use blank theme
  340. 			console.log("[Themes] Failed to load theme from localstorage");
  341. 			console.log(`[Themes] ${stored_theme}`);
  342. 			console.error(er);
  343. 			alert("[Themes] Failed to load theme from localstorage");
  344. 			stored_theme = {};
  345. 		}
  346. 		// Merge the stored theme with the default (if null, it will overwrite)
  347. 		return {...default_configuration, ...stored_theme};
  348. 	};
  349.  
  350. 	// Get the stored theme when the page loads
  351. 	const configuration = get_stored_configuration();
  352.  
  353. 	// If running inside maingameframe, inject our injectors
  354. 	if (unsafeWindow.parent !== unsafeWindow) {
  355. 		if (!unsafeWindow.bonk_theme) unsafeWindow.bonk_theme = {
  356. 			on: true,
  357. 			get_football_background: () => parseInt(getComputedStyle(document.documentElement)
  358. 				.getPropertyValue("--bonk_theme_football_background").trim().slice(1), 16),
  359. 			get_hotkey: () => getComputedStyle(document.documentElement)
  360. 				.getPropertyValue("--bonk_theme_hotkey").trim() || default_configuration.hotkey
  361. 		};
  362.  
  363. 		// Injector for football mode, if it doesn't work, ...well football will be bright
  364. 		if (!unsafeWindow.bonkCodeInjectors) unsafeWindow.bonkCodeInjectors = [];
  365. 		unsafeWindow.bonkCodeInjectors.push(bonkCode => {
  366. 			try {
  367. 				// Default football background color, not used elsewhere (yet?)
  368. 				const FOOTBALL_BACKGROUND_COLOR = "0x5a7f64";
  369. 				// Few things why I haven't implemented team colors
  370.  
  371. 				// first off, like football, you wouldn't be able to toggle the colors on and off without
  372. 				// either reloading, or exiting to the lobby and going back, this script is very very stable yet,
  373. 				// I wish to allow a hotkey to completely disable the script live
  374. 				
  375. 				// secondly, I feel like team colors isn't a vital thing people would want to customize, unlike
  376. 				// football, as football's background is larger than team colors and might be blinding at night
  377. 				
  378. 				// thirdly, I wish to modify as little of bonk.io's code as possible
  379.  
  380. 				// eslint-disable-next-line no-unused-vars
  381. 				const TEAM_COLORS = {
  382. 					RED: "0xf44336",
  383. 					BLUE: "0x2196f3",
  384. 					GREEN: "0x4caf50",
  385. 					YELLOW: "0xffeb3b"
  386. 				};
  387.  
  388. 				let newBonkCode = bonkCode;
  389. 				newBonkCode = newBonkCode
  390. 					.replace(
  391. 						FOOTBALL_BACKGROUND_COLOR,
  392. 						`(window.bonk_theme.on ? window.bonk_theme.get_football_background() : ${FOOTBALL_BACKGROUND_COLOR})`
  393. 					)
  394. 					.replace(
  395. 						FOOTBALL_BACKGROUND_COLOR,
  396. 						`(window.bonk_theme.on ? window.bonk_theme.get_football_background() : ${FOOTBALL_BACKGROUND_COLOR})`
  397. 					);
  398. 				if (bonkCode === newBonkCode) throw "[Themes] Injection failed!";
  399.  
  400. 				console.log("Themes injector run");
  401. 				return newBonkCode;
  402. 			} catch (er) {
  403. 				// Silently ignore errors, only football's background will be affected
  404. 				// which is not that big of a deal
  405. 				console.log("[Themes] Failed to inject");
  406. 				console.error(er);
  407. 				return bonkCode;
  408. 			}
  409. 		});
  410. 	}
  411.  
  412. 	// Add themed-colors class ASAP as soon as body exists
  413. 	const observer = new MutationObserver((_, observer) => {
  414. 		// Detect if body element exists
  415. 		if (document.body) {
  416. 			document.body.classList.add("themed-colors");
  417. 			observer.disconnect();
  418. 		}
  419. 	});
  420.  
  421. 	observer.observe(document, { childList: true, subtree: true  });
  422.  
  423. 	// Run when the page is loaded
  424. 	document.addEventListener("DOMContentLoaded", () => {
  425. 		document.body.classList.add("themed-colors");
  426. 		observer.disconnect();
  427.  
  428. 		// Check if the script is running inside maingameframe or not
  429. 		if (unsafeWindow.parent === unsafeWindow) {
  430. 			// Outer bonk.io website
  431. 			// Hotkey to turn the script on and off
  432. 			const maingameframe = document.getElementById("maingameframe");
  433. 			document.addEventListener("keydown", evt => {
  434. 				if (!evt.ctrlKey || !(evt.altKey || evt.shiftKey) || !maingameframe.contentWindow.bonk_theme) return;
  435. 				if (evt.key?.toLowerCase() === maingameframe.contentWindow.bonk_theme.get_hotkey()) {			
  436. 					document.body.classList.toggle("themed-colors");
  437. 					maingameframe.contentDocument.body.classList.toggle("themed-colors");
  438. 					maingameframe.contentWindow.bonk_theme.on = !maingameframe.contentWindow.bonk_theme.on;
  439. 				}
  440. 			});
  441.  
  442. 			// Flag to check whether the theme container already exists
  443. 			let theme_container_created = false;
  444. 			// Create the menu only when someone clicks on the thing in the menu
  445. 			// Show the theme container when you click the menu command thing
  446. 			if (!unsafeWindow.bonk_theme) unsafeWindow.bonk_theme = {};
  447. 			unsafeWindow.bonk_theme.open_editor = () => {
  448. 				// Creating a new theme_container, don't make new ones after this
  449. 				if (theme_container_created) return document.getElementById("theme_container").style.display = "block";
  450. 				theme_container_created = true;
  451.  
  452. 				// Create the theme menu. This is really ugly but there's like no other way idk.
  453. 				const theme_container = document.createElement("div");
  454. 				const theme_container_title = document.createElement("p");
  455. 				const configuration_container = document.createElement("div");
  456. 				const configuration_container_label = document.createElement("label");
  457. 				const configuration_list = document.createElement("div");
  458. 				const configuration_json = document.createElement("textarea");
  459. 				const configuration_json_label = document.createElement("label");
  460. 				const theme_cancel = document.createElement("div");
  461. 				const theme_save = document.createElement("div");
  462. 				const theme_reset_dark = document.createElement("div");
  463. 				const theme_reset_light = document.createElement("div");
  464. 		
  465. 				// Add the IDs so we can style them with CSS
  466. 				theme_container_title.id = "theme_container_title";
  467. 				theme_container.id = "theme_container";
  468. 				configuration_container_label.id = "configuration_container_label";
  469. 				configuration_list.id = "configuration_list";
  470. 				configuration_json.id = "configuration_json";
  471. 				theme_cancel.id = "theme_cancel";
  472. 				theme_save.id = "theme_save";
  473. 				theme_reset_dark.class = "theme_reset";
  474. 				theme_reset_light.class = "theme_reset";
  475.  
  476. 				// Add the classes
  477. 				theme_container_title.classList.add("classicTopBar");
  478. 				theme_cancel.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  479. 				theme_save.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  480. 				theme_reset_dark.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  481. 				theme_reset_light.classList.add("brownButton", "brownButton_classic", "buttonShadow");
  482.  
  483. 				// Add text to buttons and titles
  484. 				theme_container_title.textContent = "Theme Editor";
  485. 				theme_cancel.textContent = "CANCEL";
  486. 				theme_save.textContent = "SAVE";
  487. 				theme_reset_dark.textContent = "RESET THEME TO DARK PRESET";
  488. 				theme_reset_light.textContent = "RESET THEME TO LIGHT PRESET";
  489. 				configuration_container_label.textContent = "Hover over settings for more info";
  490. 				configuration_json_label.textContent = "Share, Backup or Import theme data - Copy or paste themes from/into the textbox below";
  491. 				configuration_json_label.for = "configuration_json";
  492. 				configuration_json.value = JSON.stringify(configuration);
  493. 				
  494. 				theme_container.appendChild(theme_container_title);
  495.  
  496. 				configuration_list.appendChild(configuration_container_label);
  497. 				configuration_list.appendChild(document.createElement("br"));
  498.  
  499. 				// Populate the themes list with the theme that is currently loaded
  500. 				for (const [key, value] of Object.entries(configuration)) {
  501. 				// Check if the setting exists
  502. 					if (!configuration_metadata_map[key]) continue;
  503. 					const datatype = configuration_metadata_map[key].datatype;
  504. 					const datatype_metadata = datatype_metadata_map[datatype];
  505. 					const configuration_container = document.createElement("div");
  506. 					const configuration_name = document.createElement("p");
  507. 					const configuration_value = document.createElement("input");
  508. 			
  509. 					for (const [key, value] of Object.entries(datatype_metadata.attributes))
  510. 						configuration_value.setAttribute(key, value);
  511.  
  512. 					configuration_container.classList.add("configuration_container");
  513. 					configuration_name.classList.add("configuration_name");
  514. 					configuration_value.classList.add("configuration_value");
  515.  
  516. 					configuration_container.dataset["configuration_name"] = key;
  517. 					configuration_container.title = configuration_metadata_map[key].description ?? "No description";
  518. 					configuration_name.textContent = key.replace(/_/g, " ");
  519.  
  520. 					configuration_value[datatype_metadata.value] = value;
  521. 					
  522. 					configuration_value.addEventListener("input", () => {
  523. 						if (!datatype_metadata.ignore_change) {
  524. 						// Update the CSS variable on both bonk.io and maingameframe
  525. 							document.documentElement.style
  526. 								.setProperty(`--bonk_theme_${key}`, configuration_value.value);
  527. 							maingameframe.contentDocument.documentElement.style
  528. 								.setProperty(`--bonk_theme_${key}`, configuration_value.value);
  529. 							// Store it in the current configuration (so it can be saved later)
  530. 							configuration[key] = configuration_value[datatype_metadata.value];
  531. 						}
  532.  
  533. 						// Update the data at the bottom
  534. 						configuration_json.value = JSON.stringify(configuration);
  535. 					});
  536.  
  537. 					// Add the current config to the list of settings
  538. 					configuration_container.appendChild(configuration_name);
  539. 					configuration_container.appendChild(configuration_value);
  540. 					configuration_list.appendChild(configuration_container);
  541. 				}
  542.  
  543. 				// Add the Save and Cancel buttons
  544. 				configuration_container.appendChild(theme_cancel);
  545. 				configuration_container.appendChild(theme_save);
  546.  
  547. 				configuration_list.appendChild(document.createElement("br")); // this
  548. 				configuration_list.appendChild(configuration_container);
  549. 				configuration_list.appendChild(document.createElement("br")); // is
  550. 				configuration_list.appendChild(configuration_json_label);
  551. 				configuration_list.appendChild(document.createElement("br")); // so
  552. 				configuration_list.appendChild(configuration_json);
  553. 				configuration_list.appendChild(document.createElement("br")); // bad
  554. 				configuration_list.appendChild(theme_reset_dark);
  555. 				configuration_list.appendChild(theme_reset_light);
  556. 				theme_container.appendChild(configuration_list);
  557.  
  558. 				// When save is clicked, try save theme to localstorage
  559. 				theme_save.addEventListener("click", () => {
  560. 					try {
  561. 						localStorage.setItem("bonk_theme", JSON.stringify(configuration));
  562. 						theme_container.style.display = "none";
  563. 					} catch (er) {
  564. 						console.log("[Themes] Failed to save theme to localstorage");
  565. 						console.log(`[Themes] ${JSON.stringify(configuration)}`);
  566. 						console.error(er);
  567. 						alert("Failed to save theme to localstorage");
  568. 					}
  569. 				});
  570.  
  571. 				// Reset the state of configuration from localstorage
  572. 				theme_cancel.addEventListener("click", () => {
  573. 					configuration_json.value = JSON.stringify(get_stored_configuration());
  574. 					configuration_json.dispatchEvent(new CustomEvent("input"));
  575. 					theme_container.style.display = "none";
  576. 				});
  577.  
  578. 				// Get the currently saved theme, and overwrite everything with it
  579. 				theme_reset_dark.addEventListener("click", () => {
  580. 					configuration_json.value = JSON.stringify(default_configuration);
  581. 					configuration_json.dispatchEvent(new CustomEvent("input"));
  582. 				});
  583.  
  584. 				theme_reset_light.addEventListener("click", () => {
  585. 					// Light theme defaults are not calculated by default, so we need to calculate it here now
  586. 					const default_light_configuration = {};
  587. 					for (const [key, value] of Object.entries(configuration_metadata_map)) 
  588. 						default_light_configuration[key] = value.default_light;
  589.  
  590. 					configuration_json.value = JSON.stringify(default_light_configuration);
  591. 					configuration_json.dispatchEvent(new CustomEvent("input"));
  592. 				});
  593.  
  594. 				configuration_json.addEventListener("input", () => {
  595. 					try {
  596. 						const new_theme = JSON.parse(configuration_json.value);
  597. 						// Update the configurations
  598. 						const configuration_list_children = Array.from(configuration_list.children);
  599. 						for (const configuration_container of configuration_list_children) {
  600. 							const key = configuration_container.dataset["configuration_name"];
  601. 							const value = new_theme[key];
  602. 							if (!value) continue;
  603.  
  604. 							const configuration_value = configuration_container.querySelector("input");
  605. 							const datatype_meta = datatype_metadata_map[configuration_metadata_map[key].datatype];
  606. 						
  607. 							configuration_value[datatype_meta.value] = value;
  608. 							configuration_value.dispatchEvent(new CustomEvent("input"));
  609. 						}
  610.  
  611. 						// If success, remove the border
  612. 						configuration_json.style.setProperty("border", "none");
  613. 					} catch (er) {
  614. 						console.log("[Themes] Failed to load theme from <textarea>");
  615. 						console.log(`[Themes] ${configuration_json.value}`);
  616. 						console.error(er);
  617. 						// If there is an error, set a red border
  618. 						configuration_json.style.setProperty("border", "3px solid var(--bonk_theme_red)", "important");
  619. 					}
  620. 				});
  621.  
  622. 				// Add the theme dialog to body
  623. 				document.body.appendChild(theme_container);
  624.  
  625. 				// eslint-disable-next-line no-undef
  626. 				JSColor.presets.default = {
  627. 					width: 250, 
  628. 					height: 250, 
  629. 					padding: 12,
  630. 					sliderSize: 24,
  631. 					format: "hexa",
  632. 					uppercase: false,
  633. 					mode: "HVS",
  634. 					position: "left",
  635. 					alphaChannel: true,
  636. 					borderRadius: 3,
  637. 					backgroundColor: "var(--bonk_theme_mini_menu_color)",
  638. 					controlBorderColor: "var(--bonk_theme_border_color)",
  639. 					borderColor: "transparent",
  640. 					previewSize: 24
  641. 				};
  642. 				
  643. 				// eslint-disable-next-line no-undef
  644. 				JSColor.install();
  645. 			};
  646.  
  647. 			// eslint-disable-next-line no-undef
  648. 			GM_registerMenuCommand("Edit theme", unsafeWindow.bonk_theme.open_editor);
  649. 		} else {
  650. 			const bonk_theme_button = document.createElement("div");
  651. 			const pretty_top_bar = document.getElementById("pretty_top_bar");
  652. 			const button_count = document.querySelectorAll("#pretty_top_bar>.pretty_top_button.niceborderleft").length;
  653.  
  654. 			bonk_theme_button.id = "pretty_top_bonk_theme";
  655. 			bonk_theme_button.classList.add("pretty_top_button", "niceborderleft");
  656. 			pretty_top_bar.appendChild(bonk_theme_button);
  657.  
  658. 			// eslint-disable-next-line no-undef
  659. 			GM_addStyle(`
  660. 				#pretty_top_bonk_theme {
  661. 					width: 58px;
  662. 					height: 34px;
  663. 					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M18 4V3c0-.6-.5-1-1-1H5a1 1 0 0 0-1 1v4c0 .6.5 1 1 1h12c.6 0 1-.5 1-1V6h1v4H9v11c0 .6.5 1 1 1h2c.6 0 1-.5 1-1v-9h8V4h-3z'/%3E%3C/svg%3E");
  664. 					background-size: 24px 24px;
  665. 					background-repeat: no-repeat;
  666. 					background-position: center;
  667. 					position: absolute;
  668. 					right: ${(button_count * 58) + 1}px;
  669. 					top: 0;
  670. 				}
  671. 			`);	
  672.  
  673. 			bonk_theme_button.addEventListener("click", () => {
  674. 				unsafeWindow.parent.window.bonk_theme.open_editor();
  675. 			});
  676. 			// This code is for inside maingameframe
  677. 			// Hotkey to turn the script on and off
  678. 			document.addEventListener("keydown", evt => {
  679. 				if (!evt.ctrlKey || !(evt.altKey || evt.shiftKey) || !unsafeWindow.bonk_theme) return;
  680. 				if (evt.key?.toLowerCase() === unsafeWindow.bonk_theme.get_hotkey()) {
  681. 					unsafeWindow.bonk_theme.on = !unsafeWindow.bonk_theme.on;
  682. 					document.body.classList.toggle("themed-colors");
  683. 					unsafeWindow.parent.document.body.classList.toggle("themed-colors");
  684. 				}
  685. 			});
  686. 		}
  687. 	});
  688. 	
  689. 	// List of default CSS variables
  690. 	let root_vars = [];
  691. 	for (const [key, value] of Object.entries(configuration))
  692. 		root_vars.push(`--bonk_theme_${key}: ${value};`);
  693.  
  694. 	// eslint-disable-next-line no-undef
  695. 	GM_addStyle(`
  696. 	/* CSS Variables, so we can edit their values on the fly */
  697. 	:root {
  698. 		${root_vars.join("\n		")}
  699. 	}
  700.  
  701. 	/* Page background color */
  702. 	.themed-colors #pagecontainer,
  703. 	body.themed-colors { 
  704. 		background-color: var(--bonk_theme_page_background) !important;
  705. 	}
  706.  
  707. 	:root .themed-colors {
  708. 		--kkleeMultiSelectColour: var(--bonk_theme_colored_text) !important;
  709. 		--kkleeErrorColour: var(--bonk_theme_red_text) !important;
  710. 		--kkleeCheckboxTfsTrue: var(--bonk_theme_green_text) !important;
  711. 		--kkleeCheckboxTfsFalse: var(--bonk_theme_red_text) !important;
  712. 		--kkleePreviewSliderDefaultMarkerColour: var(--bonk_theme_button_color) !important;
  713. 		--kkleePreviewSliderMarkerBackground: linear-gradient(90deg, transparent 36%, var(--kkleePreviewSliderDefaultMarkerColour), transparent 42%) !important;
  714. 	}
  715.  
  716. 	/* Dark scroll bar tracks on Firefox and Chromium-based browsers */
  717. 	.themed-colors {
  718. 		scrollbar-color: var(--bonk_theme_scrollbar_thumb) var(--bonk_theme_scrollbar_background) !important;
  719. 	}
  720.  
  721. 	.themed-colors ::-webkit-scrollbar-track {
  722. 		background-color: var(--bonk_theme_scrollbar_background) !important;
  723. 	}
  724.  
  725. 	.themed-colors ::-webkit-scrollbar-thumb {
  726. 		background-color: var(--bonk_theme_scrollbar_thumb) !important;
  727. 	}
  728.  
  729. 	/* Blockly Scrollbar theming support (for gmmaker by SneezingCactus) */
  730. 	/* .themed-colors .blocklyScrollbarBackground {
  731. 		fill: var(--bonk_theme_scrollbar_background) !important;
  732. 	}
  733.  
  734. 	.themed-colors .blocklyScrollbarHandle {
  735. 		fill: var(--bonk_theme_scrollbar_thumb) !important;
  736. 	} */
  737.  
  738. 	/* Text selection color */
  739. 	.themed-colors ::selection {
  740. 		color: var(--bonk_theme_text_selection_text) !important;
  741. 		background: var(--bonk_theme_text_selection_color) !important;
  742. 	}
  743.  
  744. 	/* Color tooltips */
  745.  
  746. 	/* 
  747. 	.themed-colors .blocklyDropDownDiv,
  748. 	.themed-colors .blocklyMenuItem 
  749. 	*/ 
  750. 	.themed-colors #friendsToolTip,
  751. 	.themed-colors #pretty_top_replay_report_tooltip,
  752. 	.themed-colors #pretty_top_replay_fav_tooltip,
  753. 	.themed-colors #newbonklobby_tooltip,
  754. 	.themed-colors #mapeditor_rightbox_shapeaddmenucontainer,
  755. 	.themed-colors #mapeditor_leftbox_createmenucontainerleft,
  756. 	.themed-colors #mapeditor_leftbox_createmenucontainerright,
  757. 	.themed-colors #mapeditor_leftbox_copywindow,
  758. 	.themed-colors #mapeditor_rightbox_newjointmenu,
  759. 	.themed-colors .newbonklobby_playerentry_menu,
  760. 	.themed-colors .newbonklobby_playerentry_menu_submenu {
  761. 		background-color: var(--bonk_theme_mini_menu_color) !important;
  762. 		color: var(--bonk_theme_mini_menu_text) !important;
  763. 	}
  764.  
  765. 	/* Color the lobby's background */
  766. 	.themed-colors .bt-behind-lobby-background,
  767. 	.themed-colors #bonkiocontainer {
  768. 		background-color: var(--bonk_theme_behind_lobby_background) !important;
  769. 	}
  770. 	
  771. 	/* Dialogs - I can just do windowShadow, but it might break things if new things are added */
  772. 	/* It's better to have a new thing visibly light rather than broken */
  773. 	.themed-colors .bt-primary-background,
  774. 	.themed-colors #autoLoginContainer,
  775. 	.themed-colors #guestOrAccountContainer_accountBox,
  776. 	.themed-colors #guestOrAccountContainer_guestBox,
  777. 	.themed-colors #guestContainer, 
  778. 	.themed-colors .accountContainer,
  779. 	.themed-colors #registerwindow_remember_label,
  780. 	.themed-colors #loginwindow_remember_label,
  781. 	.themed-colors #loginwindow,
  782. 	.themed-colors #registerwindow,
  783. 	.themed-colors #settingsContainer,
  784. 	.themed-colors .settingsHeading,
  785. 	.themed-colors .redefineControls_selectionCell:hover,
  786. 	.themed-colors #newswindow,
  787. 	.themed-colors #skinmanager,
  788. 	.themed-colors .skineditor_shapewindow,
  789. 	.themed-colors .skineditor_shapewindow_imagecontainer,
  790. 	.themed-colors #skineditor_propertiesbox,
  791. 	.themed-colors #skineditor_propertiesbox_table,
  792. 	.themed-colors #skineditor_previewbox,
  793. 	.themed-colors #skineditor_layerbox,
  794. 	.themed-colors #skineditor_layerbox_baselabel,
  795. 	.themed-colors #quickPlayWindow,
  796. 	.themed-colors #roomlistcreatewindow,
  797. 	.themed-colors .roomlistcreatewindowlabel,
  798. 	.themed-colors #roomlistjoinpasswordwindow,
  799. 	.themed-colors #sm_connectingWindow,
  800. 	.themed-colors #newbonklobby_specbox,
  801. 	.themed-colors #newbonklobby_playerbox,
  802. 	.themed-colors #newbonklobby_chatbox,
  803. 	.themed-colors #newbonklobby_settingsbox,
  804. 	.themed-colors #newbonklobby_votewindow,
  805. 	.themed-colors #newbonklobby_votewindow_maptitle,
  806. 	.themed-colors #newbonklobby_votewindow_mapauthor,
  807. 	.themed-colors #leaveconfirmwindow,
  808. 	.themed-colors #leaveconfirmwindow_text2,
  809. 	.themed-colors #hostleaveconfirmwindow,
  810. 	.themed-colors #hostleaveconfirmwindow_text2,
  811. 	.themed-colors #maploadwindow,
  812. 	.themed-colors #maploadwindowgreybar,
  813. 	.themed-colors #maploadwindowstatustext,
  814. 	.themed-colors #mapeditor_leftbox,
  815. 	.themed-colors #mapeditor_midbox,
  816. 	.themed-colors #mapeditor_rightbox,
  817. 	.themed-colors #mapeditor_save_window,
  818. 	.themed-colors #kkleeRoot,
  819. 	.themed-colors #skineditor_colorpicker,
  820. 	.themed-colors #mapeditor_colorpicker,
  821. 	.themed-colors #friendsSendWindow,
  822. 	.themed-colors #roomlistfilterwindow,
  823. 	.themed-colors #ingamecountdown,
  824. 	.themed-colors #mapeditor_save_overwrite_window,
  825. 	.themed-colors #gmeditorwindow,
  826. 	.themed-colors .newbonklobby_elementcontainer,
  827. 	#theme_container {
  828. 		background-color: var(--bonk_theme_primary_background) !important;
  829. 		color: var(--bonk_theme_primary_text) !important;
  830. 	}
  831. 	
  832. 	/* Lighter backgrounds for some menus and stuff */
  833. 	.themed-colors .bt-secondary-background,
  834. 	.themed-colors .windowTopBar_classic,
  835. 	.themed-colors #autoLogin_text,
  836. 	.themed-colors .guestOrAccountContainerLabelBox,
  837. 	.themed-colors #guest_nametext,
  838. 	.themed-colors #loginwindow_username,
  839. 	.themed-colors #loginwindow_password,
  840. 	.themed-colors #registerwindow_username,
  841. 	.themed-colors #registerwindow_password,
  842. 	.themed-colors #guest_skinbox,
  843. 	.themed-colors #skineditor_propertiesbox_blocker,
  844. 	.themed-colors #newswindow_white,
  845. 	.themed-colors .quickPlayWindowModeDiv,
  846. 	.themed-colors .quickPlayWindowText1,
  847. 	.themed-colors .quickPlayWindowText2,
  848. 	.themed-colors .quickPlayWindowText3,
  849. 	.themed-colors #roomlist,
  850. 	.themed-colors #roomlisttableheadercontainer,
  851. 	.themed-colors .roomlistcreatewindowinput,
  852. 	.themed-colors .whiteInputField,
  853. 	.themed-colors #sm_connectingWindow_text,
  854. 	.themed-colors #friendsContainer,
  855. 	.themed-colors .friends_table,
  856. 	.themed-colors .skinmanager_icon,
  857. 	.themed-colors #maploadwindowsearchinput,
  858. 	.themed-colors .maploadwindowmapdiv,
  859. 	.themed-colors #mapeditor_midbox_explain,
  860. 	.themed-colors #mapeditor_rightbox_namefield,
  861. 	.themed-colors #descriptioninner,
  862. 	.themed-colors .control_indicator,
  863. 	.configuration_value,
  864. 	#configuration_json {
  865. 		border-color: transparent !important;
  866. 		background-color: var(--bonk_theme_secondary_background) !important;
  867. 		color: var(--bonk_theme_primary_text) !important;
  868. 	}
  869.  
  870. 	/*
  871. 	.themed-colors .blocklyToolboxDiv {
  872. 		background-color: var(--bonk_theme_secondary_background) !important;
  873. 		color: var(--bonk_theme_primary_text) !important;
  874. 	}
  875.  
  876. 	.themed-colors .blocklyMainBackground {
  877. 		stroke: none !important;
  878. 		fill: var(--bonk_theme_secondary_background) !important;
  879. 	}
  880.  
  881. 	.themed-colors .blocklyFlyoutBackground {
  882. 		fill: var(--bonk_theme_mini_menu_color) !important;
  883. 	}
  884. 	*/
  885.  
  886. 	/* Style checkboxes */
  887. 	.themed-colors .control_indicator:after {
  888. 		border-color: var(--bonk_theme_primary_text) !important;
  889. 	}
  890.  
  891. 	.themed-colors #descriptioninner {
  892. 		background-image: none !important;
  893. 		box-shadow: -1px -1px 0 rgb(0 0 0 / 10%), -3px -3px 0 var(--bonk_theme_border_color), -4px -4px 0 rgb(0 0 0 / 13%), -6px -6px 0 var(--bonk_theme_border_color), -7px -7px 0 rgb(0 0 0 / 15%), -9px -9px 0 var(--bonk_theme_border_color), -10px -10px 0 rgb(0 0 0 / 18%), 4px 4px 5px var(--bonk_theme_border_color)
  894. 	}
  895. 	
  896. 	.themed-colors .mapeditor_field,
  897. 	.themed-colors .skineditor_field,
  898. 	.themed-colors .mapeditor_rightbox_table_shape_headerfield {
  899. 		border-color: transparent;
  900. 		background-color: var(--bonk_theme_secondary_background);
  901. 		color: var(--bonk_theme_primary_text);
  902. 	}
  903. 	
  904. 	/* 
  905. 	.themed-colors .blocklyEditableText>rect {
  906. 		fill: var(--bonk_theme_secondary_background) !important;
  907. 	}
  908.  
  909. 	.themed-colors .blocklyEditableText>text {
  910. 		fill: var(--bonk_theme_primary_text) !important;
  911. 	}
  912. 	*/
  913.  
  914. 	.themed-colors .newbonklobby_playerentry_name,
  915. 	.themed-colors #newbonklobby_modetext,
  916. 	.themed-colors #newbonklobby_roundslabel,
  917. 	.themed-colors .maploadwindowtext,
  918. 	.themed-colors #roomliststatustext, 
  919. 	.themed-colors #roomlisttable,
  920. 	.themed-colors .mapeditor_rightbox_table_leftcell,
  921. 	.themed-colors .mapeditor_rightbox_table_rightcell,
  922. 	.themed-colors #ingamecountdown_text,
  923. 	.themed-colors #bonkiobugemail,
  924. 	.themed-colors .maploadwindowtext_picks {
  925. 		color: var(--bonk_theme_primary_text) !important;
  926. 	}
  927.  
  928. 	.themed-colors .newbonklobby_mapsuggest_high,
  929. 	.themed-colors .newbonklobby_chat_msg_name {
  930. 		color: var(--bonk_theme_primary_text);
  931. 	}
  932.  
  933. 	.themed-colors .newbonklobby_playerentry_level,
  934. 	.themed-colors .newbonklobby_playerentry_pingtext, 
  935. 	.themed-colors #newbonklobby_chat_lowerinstruction,
  936. 	.themed-colors #newbonklobby_chat_lowerline, 
  937. 	.themed-colors .newbonklobby_chat_msg_txt,
  938. 	.themed-colors #newbonklobby_chat_input,
  939. 	.themed-colors #newbonklobby_maptext,
  940. 	.themed-colors #newbonklobby_roundsinput,
  941. 	.themed-colors #newbonklobby_mapauthortext,
  942. 	.themed-colors #newbonklobby_votewindow_maptitle_by,
  943. 	.themed-colors #hostleaveconfirmwindow_text1,
  944. 	.themed-colors #leaveconfirmwindow_text1,
  945. 	.themed-colors .maploadwindowtextmode_picks,
  946. 	.themed-colors .maploadwindowtextmode,
  947. 	.themed-colors .maploadwindowtextauthor,
  948. 	.themed-colors .maploadwindowtextauthor_picks,
  949. 	.themed-colors .roomlisttablejoined {
  950. 		color: var(--bonk_theme_secondary_text) !important;
  951. 	}
  952.  
  953. 	/* Lobby chat */
  954. 	.themed-colors .newbonklobby_mapsuggest_low {
  955. 		color: var(--bonk_theme_secondary_text);
  956. 	}
  957.  
  958. 	/* Copy link */
  959. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(9, 85, 199);"],
  960. 	.themed-colors .newbonklobby_chat_link {
  961. 		color: var(--bonk_theme_blue_text) !important;
  962. 	}
  963.  
  964. 	/* /help, player join */
  965. 	.themed-colors .newbonklobby_playerentry_balance_nerf,
  966. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 68, 68);"],
  967. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(204, 51, 51);"],
  968. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(255, 0, 0);"] {
  969. 		color: var(--bonk_theme_red_text) !important;
  970. 	}
  971.  
  972. 	/* Friend requests */
  973. 	.themed-colors .newbonklobby_playerentry_balance_buff,
  974. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(0, 103, 93);"] {
  975. 		color: var(--bonk_theme_green_text) !important;
  976. 	}
  977.  
  978. 	/* /curate */
  979. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(96, 51, 204);"] {
  980. 		color: var(--bonk_theme_purple_text) !important;
  981. 	}
  982.  
  983. 	/* "You are now host" */
  984. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(122, 25, 154);"],
  985. 	.themed-colors #newbonklobby_chat_content span[style="color: rgb(128, 13, 110);"] {
  986. 		color: var(--bonk_theme_magenta_text) !important;
  987. 	}
  988.  
  989. 	/* .themed-colors .blocklyMenuItemCheckbox */
  990. 	.themed-colors .newbonklobby_chat_status:not([style]) {
  991. 		filter: brightness(var(--bonk_theme_brightness_lighter)) !important;
  992. 	}
  993.  
  994. 	.themed-colors #descriptioncontainer,
  995. 	.themed-colors #gamethumbbox,
  996. 	.themed-colors #bgreplay {
  997. 		filter: brightness(var(--bonk_theme_brightness_darker)) !important;
  998. 	}
  999.  
  1000. 	/* Style sliders */
  1001. 	.themed-colors .compactSlider,
  1002. 	.themed-colors .newbonklobby_playerentry_balancetext {
  1003. 		background-color: transparent !important;
  1004. 		color: var(--bonk_theme_button_text) !important;
  1005. 	}
  1006. 	
  1007. 	.themed-colors.compactSlider::-webkit-slider-runnable-track {
  1008. 		background: var(--bonk_theme_secondary_background);
  1009. 	}
  1010. 	
  1011. 	.compactSlider::-webkit-slider-thumb {
  1012. 		background: var(--bonk_theme_primary_text);
  1013. 	}
  1014.  
  1015. 	.compactSlider:focus::-webkit-slider-runnable-track {
  1016. 		background: var(--bonk_theme_secondary_background);
  1017. 	}
  1018.  
  1019. 	.compactSlider::-moz-range-track {
  1020. 		background: var(--bonk_theme_secondary_background);
  1021. 	}
  1022.  
  1023. 	.compactSlider::-moz-range-thumb {
  1024. 		background: var(--bonk_theme_primary_text);
  1025. 	}
  1026. 	
  1027. 	.compactSlider::-ms-fill-lower {
  1028. 		background: var(--bonk_theme_secondary_background);
  1029. 	}
  1030.  
  1031. 	.compactSlider::-ms-fill-upper {
  1032. 		background: var(--bonk_theme_secondary_background);
  1033. 	}
  1034.  
  1035. 	.compactSlider::-ms-thumb {
  1036. 		background: var(--bonk_theme_primary_text);
  1037. 	}
  1038.  
  1039. 	.compactSlider:focus::-ms-fill-lower {
  1040. 		background: var(--bonk_theme_secondary_background);
  1041. 	}
  1042.  
  1043. 	.compactSlider:focus::-ms-fill-upper {
  1044. 		background: var(--bonk_theme_secondary_background);
  1045. 	}
  1046.  
  1047. 	/* Style buttons & dropdowns */
  1048. 	.themed-colors .brownButton_classic,
  1049. 	.themed-colors .dropdown_classic,
  1050. 	.themed-colors .skineditor_field_button,
  1051. 	.themed-colors .mapeditor_field_button,
  1052. 	.themed-colors .skineditor_basiccolorpicker_closebutton,
  1053. 	#theme_save, #theme_cancel, .theme_reset {
  1054. 		background-color: var(--bonk_theme_button_color) !important;
  1055. 		color: var(--bonk_theme_button_text) !important;
  1056. 	}
  1057.  
  1058. 	.themed-colors .brownButton_classic,
  1059. 	.themed-colors .dropdown-title,
  1060. 	.themed-colors .skineditor_field_button,
  1061. 	.themed-colors .mapeditor_field_button,
  1062. 	.themed-colors .skineditor_basiccolorpicker_closebutton,
  1063. 	#theme_save, #theme_cancel, .theme_reset {
  1064. 		outline: 2px solid var(--bonk_theme_button_outline_color) !important;
  1065. 		outline-offset: -1px !important;
  1066. 	}
  1067.  
  1068. 	.themed-colors .brownButtonDisabled,
  1069. 	.themed-colors .brownButton_disabled_classic,
  1070. 	.themed-colors .dropdown-option-disabled {
  1071. 		background-color: var(--bonk_theme_disabled_button_color) !important;
  1072. 		color: var(--bonk_theme_button_text) !important;
  1073. 	}
  1074.  
  1075. 	.themed-colors .brownButton_classic:hover,
  1076. 	.themed-colors .dropdown_classic:hover,
  1077. 	.themed-colors .skineditor_basiccolorpicker_closebutton:hover,
  1078. 	#theme_save:hover, #theme_cancel:hover, .theme_reset:hover {
  1079. 		background-color: var(--bonk_theme_hover_button_color) !important;
  1080. 		color: var(--bonk_theme_button_text) !important;
  1081. 	}
  1082.  
  1083. 	.themed-colors .brownButton_classic:active,
  1084. 	.themed-colors .dropdown_classic:active,
  1085. 	.themed-colors .newbonklobby_teamlockbutton_warn,
  1086. 	.themed-colors .skineditor_basiccolorpicker_closebutton:active,
  1087. 	#theme_save:active, #theme_cancel:active, .theme_reset:active {
  1088. 		background-color: var(--bonk_theme_active_button_color) !important;
  1089. 		color: var(--bonk_theme_button_text) !important;
  1090. 	}
  1091.  
  1092. 	/* Remove border in buttons in the Map and Skin editor, and round them */
  1093. 	.themed-colors .skineditor_field_button,
  1094. 	.themed-colors .mapeditor_field_button {
  1095. 		border-radius: 2px !important;
  1096. 		border-color: transparent !important;
  1097. 	}
  1098.  
  1099. 	.themed-colors .dropdown-title {
  1100. 		border-radius: 2px !important;
  1101. 	}
  1102.  
  1103. 	/* Not sure why there is a white background - removed */
  1104. 	.themed-colors #maploadtypedropdown {
  1105. 		background: none !important;
  1106. 	}
  1107.  
  1108. 	/* Tables in the game - Skin editor, Map Editor and Custom game list */
  1109. 	.themed-colors #roomlisttable tr:nth-child(odd),
  1110. 	.themed-colors .friends_table>tbody:nth-child(odd),
  1111. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(odd),
  1112. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(odd),
  1113. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(odd),
  1114. 	.themed-colors #redefineControls_table tr:nth-child(odd),
  1115. 	.themed-colors .roomlistfilterwindow_a,
  1116. 	.themed-colors #redefineControls_table th {
  1117. 		background-color: var(--bonk_theme_table_color) !important;
  1118. 		color: var(--bonk_theme_primary_text) !important;
  1119. 	}
  1120.  
  1121. 	.themed-colors #roomlisttable tr:nth-child(even),
  1122. 	.themed-colors .friends_table tr:nth-child(even),
  1123. 	.themed-colors #skineditor_layerbox_layertable tr:nth-child(even),
  1124. 	.themed-colors #mapeditor_leftbox_platformtable tr:nth-child(even),
  1125. 	.themed-colors #mapeditor_leftbox_spawntable tr:nth-child(even),
  1126. 	.themed-colors #redefineControls_table tr:nth-child(even),
  1127. 	.themed-colors #roomlisttableheadercontainer,
  1128. 	.themed-colors .roomlistfilterwindow_b {
  1129. 		background-color: var(--bonk_theme_table_alt_color) !important;
  1130. 		color: var(--bonk_theme_primary_text) !important;
  1131. 	}
  1132.  
  1133. 	.themed-colors #roomlisttable tr.FRIENDSPRESENT,
  1134. 	.themed-colors .maploadwindowtextaddedby_picks {
  1135. 		color: var(--bonk_theme_colored_text) !important;
  1136. 	}
  1137.  
  1138. 	.themed-colors tr.HOVERUNSELECTED:hover td {
  1139. 		background-color: var(--bonk_theme_table_hover_color) !important;
  1140. 	}
  1141.  
  1142. 	.themed-colors tr.HOVERSELECTED td,
  1143. 	.themed-colors tr.SELECTED td {
  1144. 		background-color: var(--bonk_theme_table_active_color) !important;
  1145. 	}
  1146.  
  1147. 	/* "popup" color, custom room list top bar */
  1148. 	.themed-colors .bt-titlebar,
  1149. 	.themed-colors .windowTopBar_classic, 
  1150. 	.themed-colors .classicTopBar,
  1151. 	.themed-colors .newbonklobby_boxtop, 
  1152. 	.themed-colors .newbonklobby_boxtop_classic,
  1153. 	.themed-colors .friends_topbar,
  1154. 	.themed-colors #newbonklobby_votewindow_top,
  1155. 	.themed-colors #hostleaveconfirmwindow_top,
  1156. 	.themed-colors #leaveconfirmwindow_top,
  1157. 	.themed-colors #ingamecountdown_top,
  1158. 	.themed-colors #roomlisthidepasswordedcheckboxlabel,
  1159. 	#theme_container_title {
  1160. 		background-color: var(--bonk_theme_window_color) !important;
  1161. 		color: var(--bonk_theme_window_text) !important;
  1162. 	}
  1163.  
  1164. 	/* Style the bonk.io header */
  1165. 	.themed-colors #bonkioheader {
  1166. 		background-color: var(--bonk_theme_bonk_header_color) !important;
  1167. 		color: var(--bonk_theme_bonk_header_text) !important;
  1168. 	}
  1169.  
  1170. 	/* Style the top bar */
  1171. 	.themed-colors #pretty_top_bar {
  1172. 		background-color: var(--bonk_theme_top_bar_color) !important;
  1173. 		color: var(--bonk_theme_top_bar_text) !important;
  1174. 	}
  1175.  
  1176. 	.themed-colors .pretty_top_button,
  1177. 	.themed-colors #pretty_top_name,
  1178. 	.themed-colors #pretty_top_name,
  1179. 	.themed-colors #pretty_top_level,
  1180. 	.themed-colors #pretty_top_playercount {
  1181. 		color: var(--bonk_theme_top_bar_text) !important;
  1182. 	}
  1183.  
  1184. 	.themed-colors #pretty_top_replay>.pretty_top_button,
  1185. 	.themed-colors #pretty_top_volume>.pretty_top_button {
  1186. 		background-color: var(--bonk_theme_top_bar_color) !important;
  1187. 	}
  1188.  
  1189. 	.themed-colors .pretty_top_button:hover,
  1190. 	.themed-colors #pretty_top_replay>.pretty_top_button:hover,
  1191. 	.themed-colors #pretty_top_volume>.pretty_top_button:hover {
  1192. 		background-color: var(--bonk_theme_top_bar_hover_color) !important;
  1193. 	}
  1194.  
  1195. 	.themed-colors .pretty_top_button:active,
  1196. 	.themed-colors #pretty_top_replay>.pretty_top_button:active,
  1197. 	.themed-colors #pretty_top_volume>.pretty_top_button:active {
  1198. 		background-color: var(--bonk_theme_top_bar_active_color) !important;
  1199. 	}
  1200.  
  1201. 	/* .themed-colors .blocklyDropDownDiv */
  1202. 	/* Change color of borders in settings and the map editor */
  1203. 	.themed-colors .mapeditor_rightbox_table_shape_container,
  1204. 	.themed-colors #redefineControls_table td,
  1205. 	.themed-colors #redefineControls_table th,
  1206. 	.themed-colors #redefineControls_table,
  1207. 	.themed-colors .descriptionthumbl,
  1208. 	.themed-colors .descriptionthumbr {
  1209. 		border: 1px solid var(--bonk_theme_border_color) !important;
  1210. 	}
  1211.  
  1212. 	/* Change shadow colors */
  1213. 	.themed-colors .skinmanager_icon,
  1214. 	.themed-colors #skineditor_previewbox_skincontainer {
  1215. 		box-shadow: 2px 2px 3px var(--bonk_theme_border_color) !important;
  1216. 	}
  1217.  
  1218. 	/* Players in lobby */
  1219. 	.themed-colors .newbonklobby_playerentry {
  1220. 		border-left: 4px solid var(--bonk_theme_primary_background) !important;
  1221. 		border-top: 4px solid var(--bonk_theme_primary_background) !important;
  1222. 		border-right: 4px solid var(--bonk_theme_primary_background) !important;
  1223. 		background-color: var(--bonk_theme_primary_background) !important;
  1224. 		color: var(--bonk_theme_primary_text) !important;
  1225. 	}
  1226.  
  1227. 	.themed-colors .newbonklobby_playerentry:hover {
  1228. 		border-left: 4px solid var(--bonk_theme_secondary_background) !important;
  1229. 		border-top: 4px solid var(--bonk_theme_secondary_background) !important;
  1230. 		border-right: 4px solid var(--bonk_theme_secondary_background) !important;
  1231. 		background-color: var(--bonk_theme_secondary_background) !important;
  1232. 	}
  1233.  
  1234. 	.themed-colors #newbonklobby_chat_lowerline {
  1235. 		border-top: 1px solid var(--bonk_theme_border_color) !important;
  1236. 	}
  1237.  
  1238. 	.themed-colors #newbonklobby_playerbox_middleline {
  1239. 		border-left: 1px solid var(--bonk_theme_border_color) !important;
  1240. 	}
  1241.  
  1242. 	/* Headings in the Map Editor and stuff */
  1243. 	.themed-colors .friends_titles,
  1244. 	.themed-colors .mapeditor_table_heading_div {
  1245. 		background-color: var(--bonk_theme_list_headers) !important;
  1246. 	}
  1247.  
  1248. 	/* Change the XP bar to use the colors we want */
  1249. 	.themed-colors #xpbarfill {
  1250. 		background-color: var(--bonk_theme_xp_bar_fill) !important;
  1251. 	}
  1252.  
  1253. 	/* Below is CSS for our theme editor thing */
  1254. 	#theme_container {
  1255. 		border-radius: 3px 0px 3px 3px;
  1256. 		z-index: 999;
  1257. 		font-family: "futurept_b1";
  1258. 		padding: 0px;
  1259. 		right: 0px;
  1260. 		top: 0px;
  1261. 		position: fixed;
  1262. 		overflow-y: scroll;
  1263. 		max-height: 100vh;
  1264. 		width: 20em;
  1265. 	}
  1266.  
  1267. 	#configuration_list {
  1268. 		padding: 1.5em;
  1269. 		display: flex;
  1270. 		flex-direction: column;
  1271. 	}
  1272.  
  1273. 	#theme_container_title {
  1274. 		text-align: center;
  1275. 		margin: 0px;
  1276. 		font-size: 20px;
  1277. 		line-height: 32px;
  1278. 		font-family: "futurept_b1"
  1279. 	}
  1280.  
  1281. 	.configuration_container {
  1282. 		white-space: pre-line;
  1283. 		display: flex;
  1284. 		justify-content: space-between;
  1285. 		align-items: center;
  1286. 		height: 2.25em;
  1287. 	}
  1288.  
  1289. 	.configuration_name {
  1290. 		text-transform: capitalize;
  1291. 		float: left;
  1292. 		width: 70%;
  1293. 	}
  1294.  
  1295. 	.configuration_value {
  1296. 		float: right;
  1297. 		width: 25%;
  1298. 	}
  1299.  
  1300. 	.configuration_value.jscolor {
  1301. 		border-left: none !important;
  1302. 	}
  1303.  
  1304. 	#theme_cancel {
  1305. 		float: left;
  1306. 	}
  1307.  
  1308. 	#theme_save {
  1309. 		float: right;
  1310. 	}
  1311.  
  1312. 	#theme_save,
  1313. 	#theme_cancel {
  1314. 		width: 45%;
  1315. 		height: 30px;
  1316. 		line-height: 30px;
  1317. 	}
  1318.  
  1319. 	#configuration_json {
  1320. 		align-self: center;
  1321. 		resize: none;
  1322. 		width: 100%;
  1323. 		height: 15em;
  1324. 	}
  1325. 	`);
  1326. })();