diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte
index ea60965..4142009 100644
--- a/src/lib/components/functional/Navbar.svelte
+++ b/src/lib/components/functional/Navbar.svelte
@@ -2,7 +2,6 @@
 	import { browser } from "$app/environment";
 	import { page } from "$app/stores";
 	import { duration, fade } from "$lib/animation";
-	import { theme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
@@ -127,7 +126,18 @@
 		{/each}
 		<div class="w-0.5 bg-separator h-full hidden md:flex"></div>
 		<button
-			onclick={theme.toggle}
+			onclick={() => {
+				const isDark = document.documentElement.classList.contains("dark");
+				if (isDark) {
+					document.documentElement.classList.add("light");
+					document.documentElement.classList.remove("dark");
+					localStorage.setItem("theme", "light");
+				} else {
+					document.documentElement.classList.add("dark");
+					document.documentElement.classList.remove("light");
+					localStorage.setItem("theme", "dark");
+				}
+			}}
 			class="w-14 h-full items-center justify-center hidden md:flex"
 		>
 			<SunIcon class="dynadark:hidden block" />
diff --git a/src/lib/sections/settings/Appearance.svelte b/src/lib/sections/settings/Appearance.svelte
index 788658d..8dfa6a8 100644
--- a/src/lib/sections/settings/Appearance.svelte
+++ b/src/lib/sections/settings/Appearance.svelte
@@ -1,31 +1,48 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { theme } from "$lib/store/index.svelte";
 	import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
+	import { onMount } from "svelte";
 
 	let lightElement: HTMLButtonElement;
 	let darkElement: HTMLButtonElement;
 
 	function setDark(dark: boolean) {
-		theme.dark = dark;
+		document.documentElement.classList.remove("light", "dark");
 
 		if (dark) {
 			lightElement.classList.remove("bg-accent-purple");
 			darkElement.classList.add("bg-accent-purple");
+			document.documentElement.classList.add("dark");
 		} else {
 			darkElement.classList.remove("bg-accent-purple");
 			lightElement.classList.add("bg-accent-purple");
+			document.documentElement.classList.add("light");
 		}
 	}
 
-	$effect(() => {
-		if (theme.dark) {
-			lightElement.classList.remove("bg-accent-purple");
-			darkElement.classList.add("bg-accent-purple");
-		} else {
-			darkElement.classList.remove("bg-accent-purple");
-			lightElement.classList.add("bg-accent-purple");
-		}
+	onMount(() => {
+		const updateClasses = () => {
+			const list = document.documentElement.classList;
+			if (list.contains("dark")) {
+				lightElement.classList.remove("bg-accent-purple");
+				darkElement.classList.add("bg-accent-purple");
+			} else {
+				darkElement.classList.remove("bg-accent-purple");
+				lightElement.classList.add("bg-accent-purple");
+			}
+		};
+
+		updateClasses();
+
+		// use MutationObserver to check when theme is changed (<html> classes)
+		const observer = new MutationObserver(updateClasses);
+
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+
+		return () => observer.disconnect();
 	});
 </script>
 
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index 0c82e69..d09f07b 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { converters } from "$lib/converters";
 import { error, log } from "$lib/logger";
 import { VertFile } from "$lib/types";
@@ -174,34 +173,6 @@ class Files {
 	}
 }
 
-class Theme {
-	private _dark = $state(false);
-	public get dark() {
-		return this._dark;
-	}
-	public set dark(value: boolean) {
-		this._dark = value;
-		if (!browser) return;
-		log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
-		window.plausible("Theme set", {
-			props: { theme: theme.dark ? "dark" : "light" },
-		});
-		if (value) {
-			document.documentElement.classList.add("dark");
-			document.documentElement.classList.remove("light");
-			localStorage.setItem("theme", "dark");
-		} else {
-			document.documentElement.classList.add("light");
-			document.documentElement.classList.remove("dark");
-			localStorage.setItem("theme", "light");
-		}
-	}
-	public toggle = () => {
-		this.dark = !this.dark;
-	};
-}
-
 export const files = new Files();
-export const theme = new Theme();
 export const showGradient = writable(true);
 export const gradientColor = writable("");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e7d71ca..feebce0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -115,19 +115,20 @@
 		// Apply theme before DOM is loaded
 		let theme = localStorage.getItem("theme");
 		if (theme !== "light" && theme !== "dark") {
-			const prefersDark = window.matchMedia(
-				"(prefers-color-scheme: dark)",
-			).matches;
-			theme = prefersDark ? "dark" : "light";
-
 			if (!theme) {
 				// first time visitor
 				window.addEventListener("load", () => {
 					window.plausible("Theme set", {
-						props: { theme: theme.dark ? "dark" : "light" },
+						props: { theme: prefersDark ? "dark" : "light" },
 					});
 				});
 			}
+
+			// invalid theme or first time visitor, set to default
+			const prefersDark = window.matchMedia(
+				"(prefers-color-scheme: dark)",
+			).matches;
+			localStorage.setItem("theme", prefersDark ? "dark" : "light");
 		}
 
 		document.documentElement.classList.add(theme);
