A beautifully animated theme toggler that smoothly transitions between light and dark modes using the View Transitions API.
Installation
npx shadcn@latest add @magicui/animated-theme-toggler
Required CSS
Add the following to your global CSS file:
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"
export default function Example() {
return <AnimatedThemeToggler />
}
Additional CSS classes to apply to the button
Duration of the theme transition animation in milliseconds
Features
- Smooth circular reveal animation during theme transitions
- Automatic theme detection and sync with document theme
- Persists theme preference to localStorage
- Uses View Transitions API for modern browsers
- Fully accessible with screen reader support
Credits
Created by Nazam Kalsi