From c854d5b830915ba67209c0458142637cae95b2fe Mon Sep 17 00:00:00 2001 From: takshakmudgal Date: Mon, 28 Apr 2025 16:34:03 +0530 Subject: [PATCH] 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(undefined) -const root = window.document.documentElement export function ThemeProvider({ children, defaultTheme = 'light', }: ThemeProviderProps) { - const [theme, setTheme] = useState(() => { - const storedTheme = localStorage.getItem("theme") - return storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : defaultTheme - }) - + const [theme, setTheme] = useState(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 }) }