experimental theme selector

src/gui/theming.js

+App.UI.Theme = (function() {
+	// NOTE: Due to browser limitations it is not possible to retrieve the path of selected files. We therefor expect
+	// all files to be located in the same directory as the HTML file. Selected files from somewhere else will simply
+	// not be loaded.
+	let currentThemeElement = null;
+	let devTheme = null;
+
+	return {
+		selector: selector,
+		devTheme: reloadDevTheme
+	};
+
+	/**
+	 * @returns {HTMLDivElement}
+	 */
+	function selector() {
+		const div = document.createElement("div");
+
+		const selector = document.createElement("input");
+		selector.type = "file";
+		selector.accept = ".css";
+		div.append(selector);
+
+		div.append(App.UI.DOM.link("Apply", () => {
+			unload();
+			if (selector.files.length > 0) {
+				const themeFile = selector.files[0];
+				load(themeFile.name);
+			}
+		}), " ", App.UI.DOM.link("Unload", unload));
+
+		return div;
+	}
+
+	/**
+	 * @param {string} filename or filepath relative to the HTML file.
+	 */
+	function load(filename) {
+		currentThemeElement = document.createElement("link");
+		currentThemeElement.setAttribute("rel", "stylesheet");
+		currentThemeElement.setAttribute("type", "text/css");
+		currentThemeElement.setAttribute("href", `./${filename}`);
+
+		document.head.appendChild(currentThemeElement);
+	}
+
+	function unload() {
+		if (currentThemeElement !== null) {
+			document.head.removeChild(currentThemeElement);
+			currentThemeElement = null;
+		}
+	}
+
+	/**
+	 * Unloads current dev theme and loads new theme if specified.
+	 * @param {string} [filename]
+	 */
+	function reloadDevTheme(filename) {
+		if (devTheme !== null) {
+			document.head.removeChild(devTheme);
+			devTheme = null;
+		}
+
+		if (name !== undefined) {
+			devTheme = document.createElement("link");
+			devTheme.setAttribute("rel", "stylesheet");
+			devTheme.setAttribute("type", "text/css");
+			devTheme.setAttribute("href", `./${filename}`);
+
+			document.head.appendChild(devTheme);
+		}
+	}
+})();

src/uncategorized/options.tw

@@ -1041,8 +1041,14 @@ This save was created using FC version $ver build $releaseID.
 
 <div id="Experimental" class="tabcontent">
 	<div class="subHeading" style="fontWeight:bold">
-		Experimental means just that: experimental.  Options below are likely to be in an <span class="yellow">even more incomplete or broken state than usual.</span>  <span class="red">THEY MAY NOT WORK AT ALL.</span>  Make sure you back up your save before enabling any of these, and if you are that interested, consider helping to improve them.
+		Experimental means just that: experimental. Options below are likely to be in an <span class="yellow">even more incomplete or broken state than usual.</span>  <span class="red">THEY MAY NOT WORK AT ALL.</span>  Make sure you back up your save before enabling any of these, and if you are that interested, consider helping to improve them.
 	</div>
+
+	<p>
+		UI theme selector. Allows to select a single CSS file to be loaded. <span class="red">The file has to be located in the same directory as the HTML file otherwise it will simply not load at all.</span> <span class="yellow">Themes do not persist through page reloads.</span>
+		<<print App.UI.DOM.includeDOM(App.UI.Theme.selector(), "themeSelector")>>
+	</p>
+
 	<<if ($familyTesting === 1 && $seePreg !== 0)>>
 		<<options $experimental.nursery>>
 			Nursery is