From 55a29bea9fc3c0a4d8693670e3d46845d969b376 Mon Sep 17 00:00:00 2001
From: Abelino Chavez <abelino.chavez@gmail.com>
Date: Thu, 29 Jan 2026 14:08:55 -0600
Subject: [PATCH] fix: resolve ThemeToggle hydration error and incorrect icon
 (#648)

- Added mounted state to prevent SSR/client hydration mismatch
- Show Sun icon in dark mode, Moon icon in light mode
- Render placeholder during SSR to maintain layout stability
- Fixed className prop not being applied

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/components/theme-toggle.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 6fd84fa3..236647ee 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { useTheme } from "next-themes";
 import { cn } from "@/utils/ui";
@@ -18,6 +19,25 @@ export function ThemeToggle({
 	onToggle,
 }: ThemeToggleProps) {
 	const { theme, setTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	// Prevent hydration mismatch by not rendering theme-dependent content until mounted
+	if (!mounted) {
+		return (
+			<Button
+				size="icon"
+				variant="ghost"
+				className={cn("size-8", className)}
+			>
+				<span className={cn("!size-[1.1rem]", iconClassName)} />
+				<span className="sr-only">Toggle theme</span>
+			</Button>
+		);
+	}
 
 	return (
 		<Button