From e1a2c3e444eb43c095d5f24755dc0df370184e0d Mon Sep 17 00:00:00 2001
From: Nacho Mata <nachomataalmagro@gmail.com>
Date: Thu, 23 Jan 2025 02:32:05 +0100
Subject: [PATCH 1/5] Rfactored is:inline script to ts

---
 src/components/ThemeToggle.astro | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 38faf5ff..c386669c 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -59,12 +59,12 @@ const THEMES = ["Light", "Dark", "System"]
   }
 </style>
 
-<script is:inline>
-  let remove = null
+<script>
+  let remove: (() => void) | null = null
   const matchMedia = window.matchMedia("(prefers-color-scheme: dark)")
-  const themesMenu = document.getElementById("themes-menu")
+  const themesMenu = document.getElementById("themes-menu") as HTMLDivElement
 
-  const getThemePreference = () => {
+  const getThemePreference = (): string => {
     if (typeof localStorage !== "undefined") {
       return localStorage.getItem("theme") ?? "system"
     }
@@ -74,13 +74,13 @@ const THEMES = ["Light", "Dark", "System"]
       : "light"
   }
 
-  const updateIcon = (themePreference) => {
-    document.querySelectorAll(".theme-toggle-icon").forEach((element) => {
+  const updateIcon = (themePreference: string): void => {
+    document.querySelectorAll<HTMLElement>(".theme-toggle-icon").forEach((element) => {
       element.style.scale = element.id === themePreference ? "1" : "0"
     })
   }
 
-  const updateTheme = () => {
+  const updateTheme = (): void => {
     if (remove != null) {
       remove()
     }
@@ -102,15 +102,16 @@ const THEMES = ["Light", "Dark", "System"]
 
   document.addEventListener("click", () => themesMenu.classList.remove("open"))
 
-  document.getElementById("theme-toggle-btn").addEventListener("click", (e) => {
+  document.getElementById("theme-toggle-btn")?.addEventListener("click", (e) => {
     e.stopPropagation()
     const isClosed = !themesMenu.classList.contains("open")
     themesMenu.classList[isClosed ? "add" : "remove"]("open")
   })
 
-  document.querySelectorAll(".themes-menu-option").forEach((element) => {
+  document.querySelectorAll<HTMLLIElement>(".themes-menu-option").forEach((element) => {
     element.addEventListener("click", (e) => {
-      localStorage.setItem("theme", e.target.innerText.toLowerCase().trim())
+      const target = e.target as HTMLElement
+      localStorage.setItem("theme", target.innerText.toLowerCase().trim())
       updateTheme()
     })
   })

From 409cab1288182afc7ee4bfe1b3ce3453d2be1c7e Mon Sep 17 00:00:00 2001
From: Nacho Mata <nachomataalmagro@gmail.com>
Date: Thu, 23 Jan 2025 02:51:57 +0100
Subject: [PATCH 2/5] Reuse variable in ThemeToggle component

---
 src/components/ThemeToggle.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index c386669c..5e4643de 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -69,7 +69,7 @@ const THEMES = ["Light", "Dark", "System"]
       return localStorage.getItem("theme") ?? "system"
     }
 
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
+    return matchMedia.matches
       ? "dark"
       : "light"
   }

From c7383e2d15b204a7778f0f0638ebae15f22bf730 Mon Sep 17 00:00:00 2001
From: Nacho Mata <nachomataalmagro@gmail.com>
Date: Thu, 23 Jan 2025 02:54:16 +0100
Subject: [PATCH 3/5] Refactor ThemeToggle component to use TypeScript types
 for theme preferences

---
 src/components/ThemeToggle.astro | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 5e4643de..7523028b 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -60,21 +60,25 @@ const THEMES = ["Light", "Dark", "System"]
 </style>
 
 <script>
+  type ThemePreference = "dark" | "light" | "system"
+
+  const DARK: ThemePreference = "dark"
+  const LIGHT: ThemePreference = "light"
+  const SYSTEM: ThemePreference = "system"
+
   let remove: (() => void) | null = null
   const matchMedia = window.matchMedia("(prefers-color-scheme: dark)")
   const themesMenu = document.getElementById("themes-menu") as HTMLDivElement
 
-  const getThemePreference = (): string => {
+  const getThemePreference = (): ThemePreference => {
     if (typeof localStorage !== "undefined") {
-      return localStorage.getItem("theme") ?? "system"
+      return (localStorage.getItem("theme") as ThemePreference) ?? SYSTEM
     }
 
-    return matchMedia.matches
-      ? "dark"
-      : "light"
+    return matchMedia.matches ? DARK : LIGHT
   }
 
-  const updateIcon = (themePreference: string): void => {
+  const updateIcon = (themePreference: ThemePreference): void => {
     document.querySelectorAll<HTMLElement>(".theme-toggle-icon").forEach((element) => {
       element.style.scale = element.id === themePreference ? "1" : "0"
     })
@@ -91,8 +95,8 @@ const THEMES = ["Light", "Dark", "System"]
 
     const themePreference = getThemePreference()
     const isDark =
-      themePreference === "dark" ||
-      (themePreference === "system" && matchMedia.matches)
+      themePreference === DARK ||
+      (themePreference === SYSTEM && matchMedia.matches)
 
     updateIcon(themePreference)
     document.documentElement.classList[isDark ? "add" : "remove"]("dark")
@@ -111,7 +115,8 @@ const THEMES = ["Light", "Dark", "System"]
   document.querySelectorAll<HTMLLIElement>(".themes-menu-option").forEach((element) => {
     element.addEventListener("click", (e) => {
       const target = e.target as HTMLElement
-      localStorage.setItem("theme", target.innerText.toLowerCase().trim())
+      const theme = target.innerText.toLowerCase().trim() as ThemePreference
+      localStorage.setItem("theme", theme)
       updateTheme()
     })
   })

From fa95d4ed69e0da7d537f2d5586dbe4364bd6ad50 Mon Sep 17 00:00:00 2001
From: Nacho Mata <nachomataalmagro@gmail.com>
Date: Thu, 23 Jan 2025 02:55:55 +0100
Subject: [PATCH 4/5] Refactor ThemeToggle component to use classList.toggle
 for better readability

---
 src/components/ThemeToggle.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 7523028b..90a45a96 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -99,7 +99,7 @@ const THEMES = ["Light", "Dark", "System"]
       (themePreference === SYSTEM && matchMedia.matches)
 
     updateIcon(themePreference)
-    document.documentElement.classList[isDark ? "add" : "remove"]("dark")
+    document.documentElement.classList.toggle("dark", isDark)
   }
 
   updateTheme()
@@ -109,7 +109,7 @@ const THEMES = ["Light", "Dark", "System"]
   document.getElementById("theme-toggle-btn")?.addEventListener("click", (e) => {
     e.stopPropagation()
     const isClosed = !themesMenu.classList.contains("open")
-    themesMenu.classList[isClosed ? "add" : "remove"]("open")
+    themesMenu.classList.toggle("open", isClosed)
   })
 
   document.querySelectorAll<HTMLLIElement>(".themes-menu-option").forEach((element) => {

From e09a35e75db9376ce64b67c8363508f603e27495 Mon Sep 17 00:00:00 2001
From: Nacho Mata <nachomataalmagro@gmail.com>
Date: Thu, 23 Jan 2025 03:05:52 +0100
Subject: [PATCH 5/5] Refactor ThemeToggle component to use a constant for
 localStorage key

---
 src/components/ThemeToggle.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 90a45a96..22cc7599 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -65,6 +65,7 @@ const THEMES = ["Light", "Dark", "System"]
   const DARK: ThemePreference = "dark"
   const LIGHT: ThemePreference = "light"
   const SYSTEM: ThemePreference = "system"
+  const THEME_STORAGE_KEY = "theme"
 
   let remove: (() => void) | null = null
   const matchMedia = window.matchMedia("(prefers-color-scheme: dark)")
@@ -72,7 +73,7 @@ const THEMES = ["Light", "Dark", "System"]
 
   const getThemePreference = (): ThemePreference => {
     if (typeof localStorage !== "undefined") {
-      return (localStorage.getItem("theme") as ThemePreference) ?? SYSTEM
+      return (localStorage.getItem(THEME_STORAGE_KEY) as ThemePreference) ?? SYSTEM
     }
 
     return matchMedia.matches ? DARK : LIGHT
@@ -116,7 +117,7 @@ const THEMES = ["Light", "Dark", "System"]
     element.addEventListener("click", (e) => {
       const target = e.target as HTMLElement
       const theme = target.innerText.toLowerCase().trim() as ThemePreference
-      localStorage.setItem("theme", theme)
+      localStorage.setItem(THEME_STORAGE_KEY, theme)
       updateTheme()
     })
   })