From 78555ea5932c3e02f51a5040d656acc693bedd38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rishav=E2=9A=94=EF=B8=8F?=
 <151399837+Rishav07-05@users.noreply.github.com>
Date: Fri, 27 Jun 2025 13:37:41 +0530
Subject: [PATCH] Create ThemeToggle.svelte

---
 website/src/ThemeToggle.svelte | 36 ++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 website/src/ThemeToggle.svelte

diff --git a/website/src/ThemeToggle.svelte b/website/src/ThemeToggle.svelte
new file mode 100644
index 0000000..07987c9
--- /dev/null
+++ b/website/src/ThemeToggle.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let isDark = false;
+
+  // Load theme from localStorage or system preference
+  onMount(() => {
+    const saved = localStorage.getItem('theme');
+    if (saved) {
+      isDark = saved === 'dark';
+    } else {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    updateTheme();
+  });
+
+  function toggleTheme() {
+    isDark = !isDark;
+    updateTheme();
+  }
+
+  function updateTheme() {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      root.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }
+</script>
+
+<button on:click={toggleTheme} aria-label="Toggle theme" class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-sm">
+  {isDark ? '🌙 Dark' : '☀️ Light'}
+</button>