diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte
index 4142009..d7f3fa5 100644
--- a/src/lib/components/functional/Navbar.svelte
+++ b/src/lib/components/functional/Navbar.svelte
@@ -2,6 +2,7 @@
 	import { browser } from "$app/environment";
 	import { page } from "$app/stores";
 	import { duration, fade } from "$lib/animation";
+	import { setTheme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
@@ -128,15 +129,7 @@
 		<button
 			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");
-				}
+				setTheme(isDark ? "light" : "dark");
 			}}
 			class="w-14 h-full items-center justify-center hidden md:flex"
 		>
diff --git a/src/lib/sections/settings/Appearance.svelte b/src/lib/sections/settings/Appearance.svelte
index 8dfa6a8..c0fac41 100644
--- a/src/lib/sections/settings/Appearance.svelte
+++ b/src/lib/sections/settings/Appearance.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
+	import { log } from "$lib/logger";
+	import { setTheme } from "$lib/store/index.svelte";
 	import { MoonIcon, PaletteIcon, SunIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 
@@ -12,12 +14,14 @@
 		if (dark) {
 			lightElement.classList.remove("bg-accent-purple");
 			darkElement.classList.add("bg-accent-purple");
-			document.documentElement.classList.add("dark");
+			setTheme("dark");
 		} else {
 			darkElement.classList.remove("bg-accent-purple");
 			lightElement.classList.add("bg-accent-purple");
-			document.documentElement.classList.add("light");
+			setTheme("light");
 		}
+
+		log
 	}
 
 	onMount(() => {
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index d09f07b..2b4738e 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -173,6 +173,16 @@ class Files {
 	}
 }
 
+export function setTheme(theme: "light" | "dark") {
+	document.documentElement.classList.remove("light", "dark");
+	document.documentElement.classList.add(theme);
+	localStorage.setItem("theme", theme);
+	window.plausible("Theme set", {
+		props: { theme },
+	});
+	log(["theme"], `set to ${theme}`);
+}
+
 export const files = new Files();
 export const showGradient = writable(true);
 export const gradientColor = writable("");