Workspaces in Workspaces all around

src/workspaces/components/ui/ThemeProvider.tsx

@@ -1,45 +1,40 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 
+type ColorMode = 'light' | 'dark';
+
 const initialState = {
-  theme: 'light',
-  setTheme: (theme: string) => {
-    theme;
-    return null;
-  },
+  colorMode: 'light' as ColorMode,
+  setColorMode: (_mode: ColorMode) => {},
 };
 
-type ThemeProviderProps = { children: React.ReactNode; defaultTheme?: string; storageKey?: string };
+type ColorModeProviderProps = { children: React.ReactNode; defaultMode?: ColorMode; storageKey?: string };
 
-const ThemeProviderContext = createContext(initialState);
+const ColorModeContext = createContext(initialState);
 
-export function ThemeProvider(props: ThemeProviderProps) {
-  const { children, defaultTheme = 'light', storageKey = 'theme' } = props;
-  const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  const { children, defaultMode = 'light', storageKey = 'officer-color-mode' } = props;
+  const [colorMode, setColorModeState] = useState<ColorMode>(
+    () => (localStorage.getItem(storageKey) as ColorMode) || defaultMode,
+  );
 
   useEffect(() => {
     const root = window.document.documentElement;
-
     root.classList.remove('light', 'dark');
+    root.classList.add(colorMode);
+  }, [colorMode]);
 
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (newTheme: string) => {
-      localStorage.setItem(storageKey, newTheme);
-      setTheme(newTheme);
-      return null;
-    },
+  const setColorMode = (mode: ColorMode) => {
+    localStorage.setItem(storageKey, mode);
+    setColorModeState(mode);
   };
 
-  return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;
+  return <ColorModeContext.Provider value={{ colorMode, setColorMode }}>{children}</ColorModeContext.Provider>;
 }
 
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
+export const useColorMode = () => {
+  const context = useContext(ColorModeContext);
 
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+  if (context === undefined) throw new Error('useColorMode must be used within a ColorModeProvider');
 
   return context;
 };