Fix incorrect theme when loading settings

src/app.html

@@ -14,7 +14,9 @@
 				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);