fix theme selector

FRC2713 · Jan 19, 2025 · afe3b14 · afe3b14
1 parent 560f03d
commit afe3b14
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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 = {