From 13c2a2fe8b4ede4f6c5f135907cb06bb480fce74 Mon Sep 17 00:00:00 2001
From: takshakmudgal <takshakmudgal@gmail.com>
Date: Mon, 28 Apr 2025 15:49:30 +0530
Subject: [PATCH 1/2] fix(theme): add persistence & update icon

---
 .../app/projects/layout/components/sidebar.tsx    |  3 ++-
 apps/rowboat/app/providers/theme-provider.tsx     | 15 +++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/rowboat/app/projects/layout/components/sidebar.tsx b/apps/rowboat/app/projects/layout/components/sidebar.tsx
index 9854316f..8397a830 100644
--- a/apps/rowboat/app/projects/layout/components/sidebar.tsx
+++ b/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>
diff --git a/apps/rowboat/app/providers/theme-provider.tsx b/apps/rowboat/app/providers/theme-provider.tsx
index e1eb79c2..84d78f21 100644
--- a/apps/rowboat/app/providers/theme-provider.tsx
+++ b/apps/rowboat/app/providers/theme-provider.tsx
@@ -15,21 +15,28 @@ type ThemeProviderState = {
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined)
+const root = window.document.documentElement
 
 export function ThemeProvider({
   children,
   defaultTheme = 'light',
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(defaultTheme)
+  const [theme, setTheme] = useState<Theme>(() => {
+    const storedTheme = localStorage.getItem("theme")
+    return storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : defaultTheme
+  })
 
   useEffect(() => {
-    const root = window.document.documentElement
     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'
+      localStorage.setItem("theme", newTheme)
+      return newTheme
+    })
   }
 
   return (
@@ -45,4 +52,4 @@ export function useTheme() {
     throw new Error('useTheme must be used within a ThemeProvider')
   }
   return context
-} 
\ No newline at end of file
+}
\ No newline at end of file

From c854d5b830915ba67209c0458142637cae95b2fe Mon Sep 17 00:00:00 2001
From: takshakmudgal <takshakmudgal@gmail.com>
Date: Mon, 28 Apr 2025 16:34:03 +0530
Subject: [PATCH 2/2] fix(build): moved browser-only code into useEffect

---
 apps/rowboat/app/providers/theme-provider.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/rowboat/app/providers/theme-provider.tsx b/apps/rowboat/app/providers/theme-provider.tsx
index 84d78f21..85b19094 100644
--- a/apps/rowboat/app/providers/theme-provider.tsx
+++ b/apps/rowboat/app/providers/theme-provider.tsx
@@ -15,18 +15,21 @@ type ThemeProviderState = {
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined)
-const root = window.document.documentElement
 
 export function ThemeProvider({
   children,
   defaultTheme = 'light',
 }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(() => {
-    const storedTheme = localStorage.getItem("theme")
-    return storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : defaultTheme
-  })
-
+  const [theme, setTheme] = useState<Theme>(defaultTheme)
+  
   useEffect(() => {
+    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])
@@ -34,7 +37,9 @@ export function ThemeProvider({
   const toggleTheme = () => {
     setTheme((prevTheme) => {
       const newTheme = prevTheme === 'light' ? 'dark' : 'light'
-      localStorage.setItem("theme", newTheme)
+      if (typeof window !== 'undefined') {
+        localStorage.setItem("theme", newTheme)
+      }
       return newTheme
     })
   }