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