From 08bd20c5e65b3441fff2b546402faeefc35baeac Mon Sep 17 00:00:00 2001
From: sagar prakash kawad <spkawad21@gmail.com>
Date: Sat, 18 Oct 2025 10:03:02 +0530
Subject: [PATCH] fix: Hydration error when switching between Dark/Light theme

---
 apps/web/src/components/theme-toggle.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..390273fe6 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -3,6 +3,7 @@
 import { Button } from "./ui/button";
 import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
 
 interface ThemeToggleProps {
   className?: string;
@@ -10,6 +11,20 @@ interface ThemeToggleProps {
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
   const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button size="icon" variant="text" className="h-7" disabled>
+        <Sun className="!size-[1.1rem]" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
+  }
 
   return (
     <Button