QiuYe UI
交互

Theme Transition Toggle

基于浏览器 View Transition API 的深浅模式切换组件：从触发点播放圆形、椭圆或多边形揭幕动画，封装按钮、Hook 与纯函数三种复用方式，并在不支持 API 或减少动态效果偏好下自动降级。

themedark-modeview-transitiontransition-apitoggleanimationclip-pathnext-themesshadcn

快速预览

查看 Theme Transition Toggle 组件的基本效果

View Transition
浅色模式

基本用法

使用 Theme Transition Toggle 组件的基础示例

导入组件

1import { ThemeTransitionToggle } from "@/components/qiuye-ui/theme-transition-toggle";
2import { useTheme } from "next-themes";

使用组件

1const { resolvedTheme, setTheme } = useTheme();
2const isDark = resolvedTheme === "dark";
3

4return (
5  <ThemeTransitionToggle
6    isDark={isDark}
7    onToggle={(nextDark) => setTheme(nextDark ? "dark" : "light")}
8  />
9);

组件演示

查看组件的各种使用方式和效果

正在读取当前主题...