Fix incorrect theme when loading settings

src/app.html

@@ -8,13 +8,15 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		%sveltekit.head%
 		<script>
-			(function() {
+			(function () {
 				// Apply theme before DOM is loaded
 				let theme = localStorage.getItem("theme");
 				const prefersDark = window.matchMedia(
 					"(prefers-color-scheme: dark)",
 				).matches;
-				console.log(`Theme: ${theme || "default"}, prefers dark: ${prefersDark}`);
+				console.log(
+					`Theme: ${theme || "N/A"}, prefers dark: ${prefersDark}`,
+				);
 
 				if (theme !== "light" && theme !== "dark") {
 					console.log("Invalid theme, setting to default");
@@ -23,14 +25,15 @@
 						// first time visitor
 						window.addEventListener("load", () => {
 							window.plausible("Theme set", {
-								props: { theme: prefersDark ? "dark" : "light" },
+								props: {
+									theme: prefersDark ? "dark" : "light",
+								},
 							});
 						});
 					}
 
 					// invalid theme or first time visitor, set to default
 					theme = prefersDark ? "dark" : "light";
-					console.log(`Setting theme to ${theme}`);
 					localStorage.setItem("theme", theme);
 				}
 

src/routes/+layout.svelte

@@ -16,6 +16,7 @@
 		isMobile,
 		motion,
 		showGradient,
+		theme,
 	} from "$lib/store/index.svelte";
 	import {
 		InfoIcon,
@@ -93,8 +94,8 @@
 			isMobile.set(window.innerWidth <= 768);
 		});
 
-		// defaults to true if not set
-		motion.set(localStorage.getItem("motion") !== "false");
+		motion.set(localStorage.getItem("motion") !== "false"); // defaults to true if not set
+		theme.set(localStorage.getItem("theme") as "light" | "dark" || "light");
 	});
 
 	let goingLeft = $state(false);
@@ -218,7 +219,7 @@
 	<div
 		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
 	>
-		<VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]"/>
+		<VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]" />
 	</div>
 	<div
 		id="gradient-bg"