Custom Themes "overhaul"

src/lib/CustomTheme.js

@@ -1,39 +1,6 @@
 // Custom themes.
 
-export let fallback = {
-	v: 1,
-	orange: "#f9a636",
-	orangeLight: "#ffce8c",
-	orangeDark: "#b46d34",
-	background: "#ffffff",
-	foreground: "#000000",
-	foregroundOrange: "#ffffff",
-	tinting: "#252525",
-};
-
-import {useCustomTheme, customTheme as currentCustomTheme} from "./stores.js";
-
-export function themeToString(theme) {
-	return "custom:" + JSON.stringify(theme);
-}
-
-export function stringToTheme(string) {
-	try {
-		const json = JSON.parse(string.replace("custom:", ""));
-		return {
-			v: json.v || fallback.v,
-			orange: json.orange || fallback.orange,
-			background: json.background || fallback.background,
-			foreground: json.foreground || fallback.foreground,
-			foregroundOrange:
-				json.foregroundOrange || fallback.foregroundOrange,
-			tinting: json.tinting || fallback.tinting,
-		};
-	} catch (e) {
-		console.error("Error loading custom theme: " + e);
-		return fallback;
-	}
-}
+// Helper functions to remove from hex color
 
 export function extractOctets(hex) {
 	const octetsRegex = /^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
@@ -70,6 +37,51 @@ export function removeHexColor(c1, c2) {
 		.join("");
 }
 
+// Actual code
+
+export let fallback = {
+	v: 1,
+	orange: "#f9a636",
+	background: "#ffffff",
+	foreground: "#000000",
+	foregroundOrange: "#ffffff",
+	tinting: "#252525",
+};
+
+export let fallback_fallback = {
+	v: 1,
+	orange: "#f9a636",
+	background: "#ffffff",
+	foreground: "#000000",
+	foregroundOrange: "#ffffff",
+	tinting: "#252525",
+}; // for some reason fallback can be overwritten
+
+import {useCustomTheme, customTheme as currentCustomTheme} from "./stores.js";
+
+export function themeToString(theme) {
+	return "custom:" + JSON.stringify(theme);
+}
+
+export function stringToTheme(string) {
+	try {
+		const json = JSON.parse(string.replace("custom:", ""));
+		return {
+			v: json.v || fallback.v,
+			orange: json.orange || fallback.orange,
+			background: json.background || fallback.background,
+			foreground: json.foreground || fallback.foreground,
+			foregroundOrange:
+				json.foregroundOrange || fallback.foregroundOrange,
+			tinting: json.tinting || fallback.tinting,
+		};
+	} catch (e) {
+		console.error("Error loading custom theme: " + e);
+		return fallback;
+	}
+}
+
+
 export function applyTheme(theme) {
 	if (!theme.v)
 		throw new Error("required field 'v' is not defined or is null");
@@ -93,16 +105,28 @@ export function applyTheme(theme) {
 	if (![1].includes(theme.v))
 		throw new Error(`invalid theme version (${theme.v})`);
 
-	theme.orangeLight =
-		"#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
-	theme.orangeDark =
-		"#" + removeHexColor(theme.orange.slice(1), theme.tinting.slice(1));
-
 	currentCustomTheme.set(theme);
 	useCustomTheme.set(true);
 }
 
+export function getTintColor(dark,theme) {
+	if (dark) {
+		return "#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
+	} else {
+		return "#" + removeHexColor(theme.orange.slice(1), theme.tinting.slice(1));
+	}
+}
+
 export function removeTheme() {
 	useCustomTheme.set(false);
 	currentCustomTheme.set(fallback);
 }
+
+export function get_True_Fallback() {
+	if (fallback == fallback_fallback) {
+		return fallback
+	} else {
+		console.warn("Fallback theme is not correct, resetting to fallback 2");
+		return fallback_fallback
+	}
+}

src/lib/clmanager.js

@@ -43,7 +43,12 @@ user.subscribe(v => {
 	if (_userLoaded) {
 		_user = v;
 		if (_user.theme.startsWith("custom:")) {
-			applyTheme(stringToTheme(_user.theme));
+			try {
+				applyTheme(stringToTheme(_user.theme));
+			} catch (e) {
+				console.error(`Failed to apply custom theme: ${e}`);
+				removeTheme();
+			}
 		} else {
 			removeTheme();
 		}

src/lib/modals/settings/CustomTheme.svelte

@@ -3,9 +3,9 @@
 
 	import {user, customTheme} from "../../stores.js";
 	import {
-		fallback,
 		stringToTheme,
 		themeToString,
+		get_True_Fallback,
 		applyTheme,
 		removeTheme,
 	} from "../../CustomTheme.js";
@@ -31,7 +31,12 @@
 <Modal
 	on:close={() => {
 		if ($user.theme.includes("custom:")) {
-			applyTheme(stringToTheme($user.theme));
+			try {
+				applyTheme(stringToTheme($user.theme));
+			} catch (e) {
+				console.error(`Failed to apply custom theme: ${e}`);
+				removeTheme();
+			}
 		} else {
 			removeTheme();
 		}
@@ -55,7 +60,12 @@
 		<label for="Fg2">Foreground 2: </label>
 		<input type="color" id="Fg2" bind:value={theme.foregroundOrange} />
 		<br /><br />
-		<button on:click={() => (theme = fallback)}>Reset </button>
+		<button on:click={() => {theme = get_True_Fallback()}}>Reset to default theme</button>
+		<button on:click={() => {
+			if ($user.theme.includes("custom:")) {
+				theme = stringToTheme($user.theme)
+			}
+		}} disabled = {!$user.theme.includes("custom:")}>Reset to saved theme</button>
 		<br /><br />
 		{#if error}
 			<label for="json" style="color: crimson;"
@@ -83,7 +93,12 @@
 			<button
 				on:click={() => {
 					if ($user.theme.includes("custom:")) {
-						applyTheme(stringToTheme($user.theme));
+						try {
+							applyTheme(stringToTheme($user.theme));
+						} catch (e) {
+							console.error(`Failed to apply custom theme: ${e}`);
+							removeTheme();
+						}
 					} else {
 						removeTheme();
 					}

src/pages/_layout.svelte

@@ -19,6 +19,8 @@
 	import {mobile, touch} from "../lib/responsiveness.js";
 	import * as BGM from "../lib/BGM.js";
 
+	import {getTintColor} from "../lib/CustomTheme.js";
+
 	import {afterPageLoad, params} from "@roxi/routify";
 	import {tick} from "svelte";
 
@@ -50,8 +52,8 @@
 	id="main"
 	style:--orange={$useCustomTheme ? $customTheme.orange : null}
 	style:--orange-button={$useCustomTheme ? $customTheme.orange : null}
-	style:--orange-light={$useCustomTheme ? $customTheme.orangeLight : null}
-	style:--orange-dark={$useCustomTheme ? $customTheme.orangeDark : null}
+	style:--orange-light={$useCustomTheme ? getTintColor(false, $customTheme) : null}
+	style:--orange-dark={$useCustomTheme ? getTintColor(true, $customTheme) : null}
 	style:--background={$useCustomTheme ? $customTheme.background : null}
 	style:--foreground={$useCustomTheme ? $customTheme.foreground : null}
 	style:--foreground-orange={$useCustomTheme