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