Smooth Theme Toggle

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.