From e64ec9a35d5f2cdcc3e41af296f4351dcfc6b325 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 17 Nov 2025 16:40:42 +0800
Subject: [PATCH] Fix theme toggle hydration mismatch

---
 components/theme-toggle.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 922cd8e..09fb14d 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,9 +1,19 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
 
   const next = theme === 'dark' ? 'light' : 'dark';
 
@@ -17,4 +27,3 @@ export function ThemeToggle() {
     </button>
   );
 }
-