Rather than suppressing the warning, you could also lazy load the ThemeProvider as highlighted here https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
// layout.tsx
const ThemeProvider = dynamic(
() => import("@/components/theme-provider").then((mod) => mod.ThemeProvider),
{
ssr: false,
loading: () => (
// Optional: Add skeleton loader here
<div className="min-h-screen bg-background" />
),
}
);
export default function RootLayout({ children }: Readonly<Props>) {
return (
<html lang="en">
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
inter.variable
)}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}