From 4dd50b5bfb4b7341caa867dbe7e46d73c11629f4 Mon Sep 17 00:00:00 2001
From: Megh Bari <meghbari01@gmail.com>
Date: Sun, 31 Aug 2025 15:12:01 +0530
Subject: [PATCH 1/3] feat(ui): add dynamic sun/moon icons in theme toggle
 button

---
 apps/web/src/components/theme-toggle.tsx | 54 +++++++++++++-----------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..8d9c39f12 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,25 +1,29 @@
-"use client";
-
-import { Button } from "./ui/button";
-import { Sun, Moon } from "lucide-react";
-import { useTheme } from "next-themes";
-
-interface ThemeToggleProps {
-  className?: string;
-}
-
-export function ThemeToggle({ className }: ThemeToggleProps) {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <Button
-      size="icon"
-      variant="text"
-      className="h-7"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      <Sun className="!size-[1.1rem]" />
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
-    </Button>
-  );
-}
+"use client";
+
+import { Button } from "./ui/button";
+import { Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      size="icon"
+      variant="text"
+      className="h-7"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      {theme === "dark" ? (
+        <Moon className="!size-[1.1rem]" />
+      ) : (
+        <Sun className="!size-[1.1rem]" />
+      )}
+      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+    </Button>
+  );
+}

From e1db16bfd7c0e96715ea5e0fe64f396591306b90 Mon Sep 17 00:00:00 2001
From: Megh Bari <meghbari01@gmail.com>
Date: Sun, 31 Aug 2025 15:55:29 +0530
Subject: [PATCH 2/3]  prevent hydration mismatch by using resolvedTheme and
 mounted guard

---
 apps/web/src/components/theme-toggle.tsx | 28 ++++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8d9c39f12..da71cb741 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { Button } from "./ui/button";
 import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -9,21 +10,34 @@ interface ThemeToggleProps {
 }
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return null; // prevents hydration mismatch
+  }
+
+  const isDark = resolvedTheme === "dark";
 
   return (
     <Button
       size="icon"
       variant="text"
-      className="h-7"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className={`h-7 ${className ?? ""}`}
+      type="button"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-pressed={!isDark}
     >
-      {theme === "dark" ? (
-        <Moon className="!size-[1.1rem]" />
+      {isDark ? (
+        <Moon className="!size-[1.1rem]" aria-hidden="true" />
       ) : (
-        <Sun className="!size-[1.1rem]" />
+        <Sun className="!size-[1.1rem]" aria-hidden="true" />
       )}
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+      <span className="sr-only">
+        Switch to {isDark ? "light" : "dark"} mode
+      </span>
     </Button>
   );
 }

From b3d3e8dcf98fafbc9390a46962015c2ac4518fee Mon Sep 17 00:00:00 2001
From: Megh Bari <meghbari01@gmail.com>
Date: Sun, 31 Aug 2025 16:05:18 +0530
Subject: [PATCH 3/3] Remove className from button to improve UI

---
 apps/web/src/components/theme-toggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index da71cb741..b1a5bfc45 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -25,7 +25,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
     <Button
       size="icon"
       variant="text"
-      className={`h-7 ${className ?? ""}`}
+      // className={`h-7 ${className ?? ""}`} // If you want the toggle button to have some extra space on the right side, then uncomment this className line. If you don’t care, just leave it as it is — both ways look fine
       type="button"
       onClick={() => setTheme(isDark ? "light" : "dark")}
       aria-pressed={!isDark}