From 7cbdefee59502c18ed015d3d2c8275ff05ccbe26 Mon Sep 17 00:00:00 2001
From: Shiv Chauhan <shivchauhan795@gmail.com>
Date: Wed, 9 Apr 2025 22:54:42 +0530
Subject: [PATCH] fixed theme toggle bug

---
 apps/web/components/providers/Providers.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/providers/Providers.tsx b/apps/web/components/providers/Providers.tsx
index 60b6477c..44ea6e07 100644
--- a/apps/web/components/providers/Providers.tsx
+++ b/apps/web/components/providers/Providers.tsx
@@ -3,18 +3,26 @@ import { dark } from '@clerk/themes'
 import { ClerkProvider } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "react-hot-toast";
+import { useEffect, useState } from 'react';
 
 interface ProvidersProps {
   children: React.ReactNode;
 }
 
 export function Providers({ children }: ProvidersProps) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
   return (
     // dark mode
     <ClerkProvider appearance={{ layout: { logoPlacement: "inside" }, baseTheme: dark }}>
-      <ThemeProvider
+      <ThemeProvider  
         attribute="class"
-        defaultTheme="system"
+        defaultTheme="baseTheme"
         enableSystem
         disableTransitionOnChange
       >