's'

components/theme-toggle.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { motion } from "framer-motion";
+import { useTheme } from "next-themes";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const dark = resolvedTheme === "dark";
+  return (
+    <button
+      className="rounded-full border border-white/20 bg-white/10 p-2 backdrop-blur-md"
+      onClick={() => setTheme(dark ? "light" : "dark")}
+      aria-label="切换主题"
+    >
+      <motion.div
+        key={dark ? "dark" : "light"}
+        initial={{ rotate: -20, opacity: 0 }}
+        animate={{ rotate: 0, opacity: 1 }}
+      >
+        {dark ? <Sun size={16} /> : <Moon size={16} />}
+      </motion.div>
+    </button>
+  );
+}