Initial commit

src/components/ThemeToggle.astro

@@ -0,0 +1,49 @@
+---
+
+---
+
+<button id="theme-toggle" class="w-8 h-8 -mr-2 flex items-center justify-center cursor-pointer" aria-label="Change color scheme">
+    <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="8" cy="8" r="8"></circle>
+    </svg>
+</button>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const theme = (() => {
+            if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+                return localStorage.getItem('theme') || 'light';
+            }
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                return 'dark';
+            }
+            return 'light';
+        })();
+
+        if (theme === 'light') {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+
+        window.localStorage.setItem('theme', theme);
+
+        const handleToggleClick = () => {
+            const element = document.documentElement;
+            element.classList.toggle('dark');
+
+            const isDark = element.classList.contains('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        };
+
+        document.getElementById('theme-toggle')?.addEventListener('click', handleToggleClick);
+    });
+</script>
+
+<script>
+    document.addEventListener('astro:after-swap', () => {
+        if (localStorage.theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+    });
+</script>