From afe3b140dbd3c824807f0d613e7d3d843b5edb38 Mon Sep 17 00:00:00 2001
From: Ty Tremblay <ty.tremblay@gmail.com>
Date: Sun, 19 Jan 2025 15:28:21 -0500
Subject: [PATCH] fix theme selector

---
 .../Sections/ConfigSection/ThemeSelector.tsx         | 10 ++++++++--
 src/components/ThemeProvider.tsx                     | 12 ++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Sections/ConfigSection/ThemeSelector.tsx b/src/components/Sections/ConfigSection/ThemeSelector.tsx
index 216d1ed..8e7cc1c 100644
--- a/src/components/Sections/ConfigSection/ThemeSelector.tsx
+++ b/src/components/Sections/ConfigSection/ThemeSelector.tsx
@@ -1,12 +1,18 @@
-import { useTheme } from '@/components/ThemeProvider';
+import { Theme, useTheme } from '@/components/ThemeProvider';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Computer, Moon, Sun } from 'lucide-react';
 
 export function ThemeSelector() {
   const { theme, setTheme } = useTheme();
 
+  const handleValueChange = (value: Theme) => {
+    if (value === 'light' || value === 'dark' || value === 'system') {
+      setTheme(value);
+    }
+  };
+
   return (
-    <ToggleGroup type="single" value={theme} onValueChange={setTheme}>
+    <ToggleGroup type="single" value={theme} onValueChange={handleValueChange}>
       <ToggleGroupItem value="light" aria-label="light theme">
         <Sun className="h-4 w-4" />
       </ToggleGroupItem>
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 7e21efa..d9f2f42 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -2,7 +2,7 @@ import { useQRScoutState } from '@/store/store';
 import { setColorScheme } from '@/util/theme';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'dark' | 'light' | 'system' | '';
+export type Theme = 'dark' | 'light' | 'system';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
@@ -57,13 +57,9 @@ export function ThemeProvider({
       root.classList.add(systemTheme);
       return;
     }
-    
-    if(theme !== '') {
-      setResolvedTheme(theme);
-      root.classList.add(theme);
-    }
-    
-    
+
+    setResolvedTheme(theme);
+    root.classList.add(theme);
   }, [theme]);
 
   const value = {