From 214a4b40207e3f04aeb70a3176521c85ba004e6f Mon Sep 17 00:00:00 2001 From: soosho <162333149+soosho@users.noreply.github.com> Date: Sun, 9 Feb 2025 00:46:30 +0700 Subject: [PATCH] Update theme-provider.tsx Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error - className="dark" - style={{color-scheme:"dark"}} --- src/components/shared/theme-provider.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/shared/theme-provider.tsx b/src/components/shared/theme-provider.tsx index e4a000af..81b23295 100644 --- a/src/components/shared/theme-provider.tsx +++ b/src/components/shared/theme-provider.tsx @@ -2,11 +2,19 @@ import { ThemeProvider as NextThemesProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes"; +import { useEffect, useState } from "react"; + +export default function ThemeProvider({ children, ...props }: ThemeProviderProps) { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return <>{children}; + } -export default function ThemeProvider({ - children, - ...props -}: ThemeProviderProps) { return (