生产管理系统前端 - 农事操作管理页面搭建&白天晚上切换

crop-x/src/components/layouts/ThemeToggle.tsx

@@ -1,44 +1,27 @@
-'use client';
-
-import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-
-import { Button } from '@/components/ui/button';
+import { useTheme } from '../../hooks/useTheme';
+import { Button } from '../ui/button';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <Button variant="outline" size="icon" className="relative overflow-hidden transition-all duration-300 hover:scale-110">
-        <Sun className="h-[1.2rem] w-[1.2rem]" />
-        <span className="sr-only">切换主题</span>
-      </Button>
-    );
-  }
-
-  const isDark = theme === 'dark';
 
   const toggleTheme = () => {
-    setTheme(isDark ? 'light' : 'dark');
+    setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
   return (
     <Button
-      variant="outline"
+      variant="ghost"
       size="icon"
       onClick={toggleTheme}
-      className="relative overflow-hidden transition-all duration-300 hover:scale-110"
+      title={theme === 'light' ? '切换到深色模式' : '切换到浅色模式'}
+      className="transition-colors"
     >
-      <Sun className={`h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-90 scale-0' : 'rotate-0 scale-100'}`} />
-      <Moon className={`absolute h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-0 scale-100' : '-rotate-90 scale-0'}`} />
-      <span className="sr-only">切换主题</span>
+      {theme === 'light' ? (
+        <Moon className="w-5 h-5" />
+      ) : (
+        <Sun className="w-5 h-5" />
+      )}
     </Button>
   );
 }