Theme Toggle Effect
Animated transitions when switching between light and dark themes.
Browser compatibility
This component uses the View Transitions API. Check the latest browser compatibility on MDN before using in production.
Installation
Triangle
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-triangle
Triangle blur
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-triangle-blur
Circle
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-circle
Circle blur
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-circle-blur
Circle blur (top left)
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-circle-blur-top-left
Polygon
bunx --bun shadcn@latest add @radityama/theme-toggle-effect-polygon
Polygon gradient
bunx --bun shadcn@latest add @radityama/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))
}