Update env stuff because I don't think it was all working right.

packages/ui/src/theme.tsx

@@ -1,17 +1,9 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { Moon, Sun } from 'lucide-react';
 import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
-
-import {
-  Button,
-  cn,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@gib/ui';
+import { Moon, Sun } from 'lucide-react';
+import { Button, cn } from '@gib/ui';
 
 
 const ThemeProvider = ({
@@ -27,41 +19,28 @@ interface ThemeToggleProps {
 }
 
 const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
-  const { setTheme } = useTheme();
-
+  const { setTheme, resolvedTheme } = useTheme();
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          {...buttonProps}
-          className={cn('cursor-pointer', buttonProps?.className)}
-        >
-          <Sun
-            style={{ height: `${size}rem`, width: `${size}rem` }}
-            className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
-          />
-          <Moon
-            style={{ height: `${size}rem`, width: `${size}rem` }}
-            className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
-          />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      {...buttonProps}
+      className={cn('cursor-pointer', buttonProps?.className)}
+    >
+      <Sun
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='scale-100 rotate-0 transition-all
+          dark:scale-0 dark:-rotate-90'
+      />
+      <Moon
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='absolute scale-0 rotate-90 transition-all
+          dark:scale-100 dark:rotate-0'
+      />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
 };
 
 export { ThemeProvider, ThemeToggle, type ThemeToggleProps };