Smooth Theme Toggle
Animated dark mode toggle with 14 stunning transition effects. Syncs with system preferences, persists choices, and offers full customization. Easy to integrate.
Make it with Workshop
Build your own component with AI
Animated dark mode toggle with 14 stunning transition effects. Syncs with system preferences, persists choices, and offers full customization. Easy to integrate.
Make it with Workshop
Build your own component with AI
Animated Theme Toggle is a powerful component for Framer that enables seamless dark mode switching with stunning view transition animations.
Built on Framer's native theming system, it automatically syncs with system preferences and persists user choices across sessions.
The component offers three flexible button types: preset icons (moon/sun), custom icon components, or fully customized buttons with variant support.
Choose from 14 beautifully crafted animation presets including circular reveals, directional wipes, diagonal transitions, and split effects that create smooth, cinematic transitions between themes.
Key features include:
14 animation presets with customizable duration and easing
Three button modes: preset icons, custom icons, or fully custom components
Full styling control: size, colors, borders, shadows, and corner radius
Automatic theme persistence via localStorage
System preference sync for seamless user experience
Accessible with proper ARIA labels
SSR-compatible with proper hydration handling
Perfect for creating polished, professional websites with delightful theme-switching experiences that feel native and performant.
