Animated transitions when switching between light and dark themes.
“
oh I love this one, have to implement it on orcdev.com
”OrcDev, Creator of 8bitcn.com
Browser Compatibility
This component uses the View Transitions API. Check the latest browser compatibility on MDN before using in production.
Installation
Triangle
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-triangle
Triangle Blur
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-triangle-blur
Circle
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle
Circle Blur
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle-blur
Circle Blur (Top Left)
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-circle-blur-top-left
Polygon
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-polygon
Polygon Gradient
pnpm dlx shadcn@latest add @ncdai/theme-toggle-effect-polygon-gradient
Usage
Wrap your theme setter with document.startViewTransition to trigger the effect:
const { setTheme } = useTheme()
function toggleTheme(theme: string) {
if (!document.startViewTransition) {
setTheme(theme)
return
}
document.startViewTransition(() => setTheme(theme))
}