fix: wrap ThemeProvider in client component for Next.js App Router compatibility

rishabh3562 · claude · rishabh3562 · commit 196c37b9dba7 · 2025-10-26T02:14:38.000+05:30
- Extract ThemeProvider into a separate client component (components/providers.tsx) - Fix theme toggle functionality by ensuring ThemeProvider runs on client-side - Resolves hydration mismatch and theme state persistence issues 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { SiteHeader } from "@/components/site-header";
 import { SiteFooter } from "@/components/site-footer";
-import { ThemeProvider } from "next-themes";
+import { Providers } from "@/components/providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,19 +21,13 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          storageKey="devtools-theme"
-          disableTransitionOnChange
-        >
+        <Providers>
           <div className="relative min-h-screen flex flex-col">
             <SiteHeader />
             <main className="flex-1">{children}</main>
             <SiteFooter />
           </div>
-        </ThemeProvider>
+        </Providers>
       </body>
     </html>
   );
diff --git a/components/providers.tsx b/components/providers.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      storageKey="devtools-theme"
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
