From 0051067371770390fd7aa726d0a59cb09df55877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Fri, 18 Oct 2024 18:24:45 +1100
Subject: [PATCH] fix: theme toggle did weird things

---
 components/ThemeToggle.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index dee8ecd..ea3b0f6 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -13,8 +13,15 @@ export function ThemeToggle() {
       type="single"
       size="sm"
       value={theme}
-      onValueChange={(e) => setTheme(e)}
-      className={`${"flex px-1 py-1 rounded-md"} ${theme === "light" || (theme === "system" && darkMode === "light") ? "bg-blue-200" : "bg-slate-700"}`}
+      onValueChange={(newTheme) => {
+        // This check is needed because if the user clicks on a button twice the button gets unselected and the newTheme is undefined
+        if (newTheme) {
+          setTheme(newTheme);
+        } else {
+          console.log("No theme selected, keeping current theme:", theme);
+        }
+      }}
+      className="flex px-1 py-1 rounded-md bg-blue-200 dark:bg-slate-700"
     >
       {theme === "light" || (theme === "system" && darkMode === "light") ? (
         <ToggleGroupItem value="dark" aria-label="Dark">