28 lines
910 B
TypeScript
28 lines
910 B
TypeScript
import { Moon, Sun } from "lucide-react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Button } from "@/components/ui/button";
|
||
import { useTheme } from "@/components/theme-provider";
|
||
|
||
export function ModeToggle() {
|
||
const { theme, setTheme } = useTheme();
|
||
const { t } = useTranslation();
|
||
|
||
const toggleTheme = () => {
|
||
// 如果当前是 dark 或 system（且系统是暗色），切换到 light
|
||
// 否则切换到 dark
|
||
if (theme === "dark") {
|
||
setTheme("light");
|
||
} else {
|
||
setTheme("dark");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Button variant="outline" size="icon" onClick={toggleTheme}>
|
||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||
<span className="sr-only">{t("common.toggleTheme")}</span>
|
||
</Button>
|
||
);
|
||
}
|