Workspaces in Workspaces all around

src/workspaces/components/ui/mode-toggle.tsx

@@ -1,25 +1,25 @@
 import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useTheme } from '@/components/ui/ThemeProvider';
+import { useColorMode } from '@/components/ui/ThemeProvider';
 import { cn } from 'helpers/cn';
 
 export const ModeToggle = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
   ({ className, ...props }, ref) => {
-    const { theme, setTheme } = useTheme();
+    const { colorMode, setColorMode } = useColorMode();
 
     return (
       <Button
         ref={ref}
         variant="outline"
         size="icon"
-        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+        onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
         className={cn('h-9 w-9', className)}
         {...props}
       >
         <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
         <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span className="sr-only">Toggle theme</span>
+        <span className="sr-only">Toggle color mode</span>
       </Button>
     );
   },