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
`}
>
-
+ { theme == "light" ? : }
{!collapsed && Appearance}
diff --git a/apps/rowboat/app/providers/theme-provider.tsx b/apps/rowboat/app/providers/theme-provider.tsx
index e1eb79c2..85b19094 100644
--- a/apps/rowboat/app/providers/theme-provider.tsx
+++ b/apps/rowboat/app/providers/theme-provider.tsx
@@ -21,15 +21,27 @@ export function ThemeProvider({
defaultTheme = 'light',
}: ThemeProviderProps) {
const [theme, setTheme] = useState(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
-}
\ No newline at end of file
+}
\ No newline at end of file