The theme option will now be saved to a cookie

src/component/settings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { themes } from "../script/theme.ts";
+  import { setCookie, getCookie } from "../script/cookie.ts";
 
   let lightButtonIcon = $state() as HTMLElement;
   let darkButtonIcon = $state() as HTMLElement;
@@ -13,6 +14,7 @@
   let { themeOption = $bindable() } = $props();
 
   function setThemeOption(newThemeOption: string) {
+    setCookie("theme", newThemeOption);
     switch (newThemeOption) {
       case themes.LIGHT:
         themeOption = themes.LIGHT;
@@ -40,6 +42,13 @@
     }
   }
 
+  onMount(() => {
+    let themeCookie = getCookie("theme");
+    if (Object.values(themes).includes(themeCookie)) {
+      setThemeOption(themeCookie);
+    }
+  });
+
   let darkTheme: CallableFunction = getContext("darkTheme");
 </script>
 

src/script/cookie.ts

@@ -0,0 +1,22 @@
+// The magic cookie system is so stupid
+
+export function setCookie(cname: string, cvalue: string) {
+	document.cookie = cname + "=" + cvalue + ";";
+}
+
+// Credit: https://www.w3schools.com/js/js_cookies.asp
+export function getCookie(cname: string): string {
+	let name = cname + "=";
+	let decodedCookie = decodeURIComponent(document.cookie);
+	let ca = decodedCookie.split(";");
+	for (let i = 0; i < ca.length; i++) {
+		let c = ca[i];
+		while (c.charAt(0) == " ") {
+			c = c.substring(1);
+		}
+		if (c.indexOf(name) == 0) {
+			return c.substring(name.length, c.length);
+		}
+	}
+	return "";
+}