Merge pull request #94 from takshakmudgal/ui/theme-persistence

fix(theme): add persistence & update icon

apps/rowboat/app/projects/layout/components/sidebar.tsx

@@ -13,6 +13,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   Moon,
+  Sun,
   HelpCircle
 } from "lucide-react";
 import { getProjectConfig } from "@/app/actions/project_actions";
@@ -213,7 +214,7 @@ export default function Sidebar({ projectId, useRag, useAuth, collapsed = false,
                 text-zinc-600 dark:text-zinc-400
               `}
             >
-              <Moon size={COLLAPSED_ICON_SIZE} />
+              { theme == "light" ? <Moon size={COLLAPSED_ICON_SIZE} /> : <Sun size={COLLAPSED_ICON_SIZE} /> }
               {!collapsed && <span>Appearance</span>}
             </button>
           </Tooltip>

apps/rowboat/app/providers/theme-provider.tsx

@@ -21,15 +21,27 @@ export function ThemeProvider({
   defaultTheme = 'light',
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(defaultTheme)
-
+  
   useEffect(() => {
-    const root = window.document.documentElement
+    const root = document.documentElement
+    const storedTheme = localStorage.getItem("theme")
+    
+    if (storedTheme === 'dark' || storedTheme === 'light') {
+      setTheme(storedTheme)
+    }
+    
     root.classList.remove('light', 'dark')
     root.classList.add(theme)
   }, [theme])
 
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
+    setTheme((prevTheme) => {
+      const newTheme = prevTheme === 'light' ? 'dark' : 'light'
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("theme", newTheme)
+      }
+      return newTheme
+    })
   }
 
   return (
@@ -45,4 +57,4 @@ export function useTheme() {
     throw new Error('useTheme must be used within a ThemeProvider')
   }
   return context
-} 
+}