58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
import { Moon, Sun } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
import { flushSync } from "react-dom";
|
|
|
|
import { Button } from "~/components/ui/button";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
export function ThemeToggle({ className }: { className?: string }) {
|
|
const [mounted, setMounted] = useState(false);
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const isDark = mounted && resolvedTheme === "dark";
|
|
const nextTheme = isDark ? "light" : "dark";
|
|
|
|
// 渐进式主题过渡:整页新旧快照交叉淡化(View Transitions 默认行为,
|
|
// plus-lighter 混合,中途无灰闪)。.theme-vt 只在本次过渡期间挂在 html
|
|
// 上,给 app.css 一个作用域去放缓时长/缓动,不影响其它 view transition
|
|
// (如 play-card)。不支持或用户偏好减弱动效时,退回直接切换。
|
|
function handleToggle() {
|
|
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (!document.startViewTransition || prefersReduced) {
|
|
setTheme(nextTheme);
|
|
return;
|
|
}
|
|
|
|
const root = document.documentElement;
|
|
root.classList.add("theme-vt");
|
|
// flushSync:startViewTransition 的回调返回后浏览器就拍新快照,
|
|
// 必须让 React 同步把主题类落到 DOM,不能等下一轮调度
|
|
const vt = document.startViewTransition(() => {
|
|
flushSync(() => setTheme(nextTheme));
|
|
});
|
|
void vt.finished.finally(() => root.classList.remove("theme-vt"));
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
aria-label={isDark ? "切换到亮色主题" : "切换到暗色主题"}
|
|
title={isDark ? "切换到亮色主题" : "切换到暗色主题"}
|
|
onClick={handleToggle}
|
|
className={cn("relative", className)}
|
|
>
|
|
{/* 两个图标常驻,靠 dark: 变体做旋转缩放交接 —— 比条件渲染多一层
|
|
"转出去/转进来"的连贯感,也天然无水合闪烁 */}
|
|
<Sun className="h-4 w-4 rotate-0 scale-100 transition-transform duration-slow ease-out dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-transform duration-slow ease-out dark:rotate-0 dark:scale-100" />
|
|
</Button>
|
|
);
|
|
}
|