Theme Toggle Effect
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
Use cases
- Light and dark toggle in a site header.
- Theme change on a portfolio or marketing site.
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))
}Credits
References
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.