From e20afa3313a80c273450ef47ac604fd6a93f591c Mon Sep 17 00:00:00 2001
From: tobias <tobias-ahlqvist@outlook.com>
Date: Sun, 19 May 2024 18:06:38 +0200
Subject: [PATCH] Add vanilla theme switcher

---
 astro/src/components/Footer.astro        |  4 +++-
 astro/src/components/ThemeSwitcher.astro | 12 ++++++++++++
 astro/src/utils/theme.ts                 | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 astro/src/components/ThemeSwitcher.astro
 create mode 100644 astro/src/utils/theme.ts

diff --git a/astro/src/components/Footer.astro b/astro/src/components/Footer.astro
index 3ae7d5b..bd55e74 100644
--- a/astro/src/components/Footer.astro
+++ b/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>
\ No newline at end of file
diff --git a/astro/src/components/ThemeSwitcher.astro b/astro/src/components/ThemeSwitcher.astro
new file mode 100644
index 0000000..d0a12c2
--- /dev/null
+++ b/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>
diff --git a/astro/src/utils/theme.ts b/astro/src/utils/theme.ts
new file mode 100644
index 0000000..ceec7db
--- /dev/null
+++ b/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);
+    }
+}