From 5d34bc3643c86a09fdb42a690fa55a044843fd90 Mon Sep 17 00:00:00 2001
From: peng <cavin@maimaiplanet.com>
Date: Tue, 28 Oct 2025 20:39:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=AE=A1=E7=90=86=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=89=8D=E7=AB=AF=20-=20=E4=BA=AE=E6=9A=97=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E7=BC=93=E5=AD=98=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 crop-x/src/components/layouts/ThemeToggle.tsx | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/crop-x/src/components/layouts/ThemeToggle.tsx b/crop-x/src/components/layouts/ThemeToggle.tsx
index a8ec170..95adbe5 100644
--- a/crop-x/src/components/layouts/ThemeToggle.tsx
+++ b/crop-x/src/components/layouts/ThemeToggle.tsx
@@ -1,14 +1,37 @@
+'use client';
+
 import { Moon, Sun } from 'lucide-react';
-import { useTheme } from '../../hooks/useTheme';
+import { useTheme } from 'next-themes';
 import { Button } from '../ui/button';
+import { useEffect, useState } from 'react';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // 避免服务端渲染和客户端渲染不匹配
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const toggleTheme = () => {
     setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
+  // 在组件挂载前不渲染，避免闪烁
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        disabled
+        className="transition-colors"
+      >
+        <Sun className="w-5 h-5" />
+      </Button>
+    );
+  }
+
   return (
     <Button
       variant="ghost"