Add vanilla theme switcher

astro/src/components/Footer.astro

@@ -1,9 +1,11 @@
 ---
 import { getCurrentYear } from "@/utils/date";
+import ThemeSwitcher from "./ThemeSwitcher.astro";
 ---
 
-<footer>
+<footer class="flex justify-between">
     <p class="text-lg font-semibold">
         &copy; {getCurrentYear()} Example Website. All rights reserved.
     </p>
+    <ThemeSwitcher/>
 </footer>

astro/src/components/ThemeSwitcher.astro

@@ -0,0 +1,12 @@
+---
+---
+<select id="theme-selector">
+    <option value="autonomic">Autonomic</option>
+    <option value="light">Light</option>
+    <option value="dark">Dark</option>
+</select>
+
+<script>
+    import { handleThemeChange, switchTheme, initializeThemeSelector } from "@/utils/theme"
+    initializeThemeSelector()
+</script>

astro/src/utils/theme.ts

@@ -0,0 +1,21 @@
+export function switchTheme(themeClass: string): void {
+    const bodyElement = document.body;
+    const classesToRemove = ['light', 'dark', 'autonomic'];
+    
+    bodyElement.classList.remove(...classesToRemove);
+    bodyElement.classList.add(themeClass);
+}
+
+export function handleThemeChange(event: Event): void {
+    const selectElement = event.target as HTMLSelectElement;
+    const selectedTheme = selectElement.value;
+    
+    switchTheme(selectedTheme);
+}
+
+export function initializeThemeSelector(): void {
+    const themeSelector = document.getElementById('theme-selector');
+    if (themeSelector) {
+        themeSelector.addEventListener('change', handleThemeChange);
+    }
+}