Fix theme toggle functionality and set dark mode as default

wbfossadmin · wbfossadmin · commit db9a598ec879 · 2025-11-09T20:06:22.000+05:30
- Created Providers component as client component wrapper for ThemeProvider
- Fixed theme toggle button not working (Server/Client Component conflict)
- Set default theme to dark mode instead of system preference
- Theme toggle now properly switches between dark and light modes
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "next-themes";
 import { VT323, Share_Tech, Inter } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { GoogleAnalytics } from "@/components/GoogleAnalytics";
+import { Providers } from "@/components/Providers";
 import "./globals.css";
 
 // Font configurations
@@ -165,9 +165,9 @@ export default function RootLayout({
         />
       </head>
       <body className={`${inter.variable} ${vt323.variable} ${shareTech.variable} antialiased font-sans`}>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <Providers>
           {children}
-        </ThemeProvider>
+        </Providers>
         <Analytics />
         <SpeedInsights />
         <GoogleAnalytics />
diff --git a/components/Providers.tsx b/components/Providers.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+      {children}
+    </ThemeProvider>
+  );
+}
