1 files changed, 78 insertions, 0 deletions
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
new file mode 100644
index 0000000..f136246
--- /dev/null
+++ b/src/lib/components/ThemeToggle.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+
+    function getInitialTheme(): "light" | "dark" {
+        if (browser) {
+            const stored = localStorage.getItem("theme");
+            if (stored === "light" || stored === "dark") return stored;
+            return window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+        }
+        return "light";
+    }
+
+    let theme = $state<"light" | "dark">(getInitialTheme());
+
+    function applyTheme(newTheme: "light" | "dark") {
+        if (browser) {
+            document.documentElement.setAttribute("data-theme", newTheme);
+            localStorage.setItem("theme", newTheme);
+        }
+    }
+
+    $effect(() => {
+        applyTheme(theme);
+    });
+
+    function toggleTheme() {
+        theme = theme === "light" ? "dark" : "light";
+    }
+</script>
+
+<button
+    class="theme-toggle"
+    onclick={toggleTheme}
+    aria-label={theme === "light"
+        ? "Switch to dark mode"
+        : "Switch to light mode"}
+    title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+>
+    {#if theme === "light"}
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+    {:else}
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+    {/if}
+</button>