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..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(undefined)
+const root = window.document.documentElement
export function ThemeProvider({
children,
defaultTheme = 'light',
}: ThemeProviderProps) {
- const [theme, setTheme] = useState(defaultTheme)
+ const [theme, setTheme] = useState(() => {
+ 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