26 lines
716 B
TypeScript
26 lines
716 B
TypeScript
"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>
|
|
);
|
|
}
|