From cd3820a3932099d3e39af9e4f98bbafc39b240a9 Mon Sep 17 00:00:00 2001
From: Bloctans <93960460+Bloctans@users.noreply.github.com>
Date: Mon, 29 Jan 2024 16:50:52 -0600
Subject: [PATCH 1/6] little overhaul to custom themes

---
 src/lib/CustomTheme.js                     | 117 ++++++++++++++-------
 src/lib/modals/settings/CustomTheme.svelte |   9 +-
 src/pages/_layout.svelte                   |   6 +-
 3 files changed, 89 insertions(+), 43 deletions(-)

diff --git a/src/lib/CustomTheme.js b/src/lib/CustomTheme.js
index bcb26de3..3ce881eb 100644
--- a/src/lib/CustomTheme.js
+++ b/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: 2,
+	orange: "#f9a636",
+	background: "#ffffff",
+	foreground: "#000000",
+	foregroundOrange: "#ffffff",
+	tinting: "#252525",
+};
+
+export let fallback_fallback = {
+	v: 2,
+	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");
@@ -90,19 +102,46 @@ export function applyTheme(theme) {
 	if (!theme.tinting)
 		throw new Error("required field 'tinting' is not defined or is null");
 
-	if (![1].includes(theme.v))
+	if (![1,2].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));
+	if (theme.v == 1) {
+		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 (theme.v > 1) {
+		if (dark) {
+			return "#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
+		} else {
+			return "#" + removeHexColor(theme.orange.slice(1), theme.tinting.slice(1));
+		}
+	} else {
+		if (dark) {
+			return theme.orangeLight
+		} else {
+			return theme.orangeDark
+		}
+	}
+}
+
 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
+	}
+}
\ No newline at end of file
diff --git a/src/lib/modals/settings/CustomTheme.svelte b/src/lib/modals/settings/CustomTheme.svelte
index a28da326..0164b217 100644
--- a/src/lib/modals/settings/CustomTheme.svelte
+++ b/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";
@@ -55,7 +55,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)
+			}
+		}}>Reset to saved theme</button>
 		<br /><br />
 		{#if error}
 			<label for="json" style="color: crimson;"
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
index 13961994..6ccdfc17 100644
--- a/src/pages/_layout.svelte
+++ b/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

From 27c678773c2da5d7a9b91fc452d768402c0214a4 Mon Sep 17 00:00:00 2001
From: Bloctans <93960460+Bloctans@users.noreply.github.com>
Date: Mon, 29 Jan 2024 16:54:53 -0600
Subject: [PATCH 2/6] disable reset to saved theme button on times

---
 src/lib/modals/settings/CustomTheme.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/modals/settings/CustomTheme.svelte b/src/lib/modals/settings/CustomTheme.svelte
index 0164b217..ec19baa0 100644
--- a/src/lib/modals/settings/CustomTheme.svelte
+++ b/src/lib/modals/settings/CustomTheme.svelte
@@ -60,7 +60,7 @@
 			if ($user.theme.includes("custom:")) {
 				theme = stringToTheme($user.theme)
 			}
-		}}>Reset to saved theme</button>
+		}} disabled = {!$user.theme.includes("custom:")}>Reset to saved theme</button>
 		<br /><br />
 		{#if error}
 			<label for="json" style="color: crimson;"

From bbb991f12b09a0403f7e12163287b6c0984e77bb Mon Sep 17 00:00:00 2001
From: Bloctans <93960460+Bloctans@users.noreply.github.com>
Date: Sun, 4 Feb 2024 00:40:41 -0600
Subject: [PATCH 3/6] reverted v2, now v1 just doesnt care

---
 src/lib/CustomTheme.js | 27 ++++++---------------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/lib/CustomTheme.js b/src/lib/CustomTheme.js
index 3ce881eb..26610f10 100644
--- a/src/lib/CustomTheme.js
+++ b/src/lib/CustomTheme.js
@@ -40,7 +40,7 @@ export function removeHexColor(c1, c2) {
 // Actual code
 
 export let fallback = {
-	v: 2,
+	v: 1,
 	orange: "#f9a636",
 	background: "#ffffff",
 	foreground: "#000000",
@@ -49,7 +49,7 @@ export let fallback = {
 };
 
 export let fallback_fallback = {
-	v: 2,
+	v: 1,
 	orange: "#f9a636",
 	background: "#ffffff",
 	foreground: "#000000",
@@ -102,33 +102,18 @@ export function applyTheme(theme) {
 	if (!theme.tinting)
 		throw new Error("required field 'tinting' is not defined or is null");
 
-	if (![1,2].includes(theme.v))
+	if (![1].includes(theme.v))
 		throw new Error(`invalid theme version (${theme.v})`);
 
-	if (theme.v == 1) {
-		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 (theme.v > 1) {
-		if (dark) {
-			return "#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
-		} else {
-			return "#" + removeHexColor(theme.orange.slice(1), theme.tinting.slice(1));
-		}
+	if (dark) {
+		return "#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
 	} else {
-		if (dark) {
-			return theme.orangeLight
-		} else {
-			return theme.orangeDark
-		}
+		return "#" + removeHexColor(theme.orange.slice(1), theme.tinting.slice(1));
 	}
 }
 

From 0c0ee4294893b4ffe7ac090d09f13eb76a1ab7f8 Mon Sep 17 00:00:00 2001
From: ShowierData9978 <mellfang36@gmail.com>
Date: Sun, 4 Feb 2024 02:04:29 -0600
Subject: [PATCH 4/6] Fix: Remove crash on unknown theme version Just use
 fallback on error

---
 src/lib/CustomTheme.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/CustomTheme.js b/src/lib/CustomTheme.js
index bcb26de3..6bc9661b 100644
--- a/src/lib/CustomTheme.js
+++ b/src/lib/CustomTheme.js
@@ -70,11 +70,13 @@ export function removeHexColor(c1, c2) {
 		.join("");
 }
 
-export function applyTheme(theme) {
+export function checkTheme(theme) {
+
+
 	if (!theme.v)
 		throw new Error("required field 'v' is not defined or is null");
 	if (!theme.orange)
-		throw new Error("required field 'orange' is not defined or is null");
+	throw new Error("required field 'orange' is not defined or is null");
 	if (!theme.background)
 		throw new Error(
 			"required field 'background' is not defined or is null"
@@ -92,7 +94,14 @@ export function applyTheme(theme) {
 
 	if (![1].includes(theme.v))
 		throw new Error(`invalid theme version (${theme.v})`);
-
+	}
+export function applyTheme(theme) {
+	try {
+		checkTheme(theme);
+	} catch (e) {
+		console.error("Error loading custom theme: " + e);
+		theme = JSON.parse(JSON.stringify(fallback));
+	}
 	theme.orangeLight =
 		"#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
 	theme.orangeDark =

From 88ab117d77f984593687734b4c8cb822487c8cce Mon Sep 17 00:00:00 2001
From: Tnix <hi@tnix.dev>
Date: Sun, 4 Feb 2024 21:28:18 +1300
Subject: [PATCH 5/6] revert CustomTheme.js and make it remove custom theme
 upon error in clmanager.js

---
 src/lib/CustomTheme.js | 15 +++------------
 src/lib/clmanager.js   |  7 ++++++-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/lib/CustomTheme.js b/src/lib/CustomTheme.js
index 6bc9661b..bcb26de3 100644
--- a/src/lib/CustomTheme.js
+++ b/src/lib/CustomTheme.js
@@ -70,13 +70,11 @@ export function removeHexColor(c1, c2) {
 		.join("");
 }
 
-export function checkTheme(theme) {
-
-
+export function applyTheme(theme) {
 	if (!theme.v)
 		throw new Error("required field 'v' is not defined or is null");
 	if (!theme.orange)
-	throw new Error("required field 'orange' is not defined or is null");
+		throw new Error("required field 'orange' is not defined or is null");
 	if (!theme.background)
 		throw new Error(
 			"required field 'background' is not defined or is null"
@@ -94,14 +92,7 @@ export function checkTheme(theme) {
 
 	if (![1].includes(theme.v))
 		throw new Error(`invalid theme version (${theme.v})`);
-	}
-export function applyTheme(theme) {
-	try {
-		checkTheme(theme);
-	} catch (e) {
-		console.error("Error loading custom theme: " + e);
-		theme = JSON.parse(JSON.stringify(fallback));
-	}
+
 	theme.orangeLight =
 		"#" + addHexColor(theme.orange.slice(1), theme.tinting.slice(1));
 	theme.orangeDark =
diff --git a/src/lib/clmanager.js b/src/lib/clmanager.js
index 72e5cd81..8de70981 100644
--- a/src/lib/clmanager.js
+++ b/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 load custom theme: ${e}`);
+				removeTheme();
+			}
 		} else {
 			removeTheme();
 		}

From 2c8eda1294d64b1c3e1d1f2b87609dfdde4a02e0 Mon Sep 17 00:00:00 2001
From: Tnix <hi@tnix.dev>
Date: Sun, 4 Feb 2024 21:34:12 +1300
Subject: [PATCH 6/6] fix cancelling on CustomTheme modal

---
 src/lib/clmanager.js                       |  2 +-
 src/lib/modals/settings/CustomTheme.svelte | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/clmanager.js b/src/lib/clmanager.js
index 8de70981..ab3bfef8 100644
--- a/src/lib/clmanager.js
+++ b/src/lib/clmanager.js
@@ -46,7 +46,7 @@ user.subscribe(v => {
 			try {
 				applyTheme(stringToTheme(_user.theme));
 			} catch (e) {
-				console.error(`Failed to load custom theme: ${e}`);
+				console.error(`Failed to apply custom theme: ${e}`);
 				removeTheme();
 			}
 		} else {
diff --git a/src/lib/modals/settings/CustomTheme.svelte b/src/lib/modals/settings/CustomTheme.svelte
index a28da326..4422ba1c 100644
--- a/src/lib/modals/settings/CustomTheme.svelte
+++ b/src/lib/modals/settings/CustomTheme.svelte
@@ -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();
 		}
@@ -83,7 +88,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();
 					}