Beautiful, smooth animations for theme switching in React applications.
Built with TypeScript and powered by the View Transition API.
Click any toggle below to experience the theme switch animations
Smooth expanding circle transition
Circle with elegant blur effect
Scanning line sweeps in any direction
Diagonal wipe sweeping across the screen
Diagonal wipe with a soft gradient edge
Reveal the theme through any GIF mask
Optimized for high-resolution displays with smooth 60fps animations
Circle, blur circle, QR scan, polygon, polygon gradient, and custom GIF effects
Works perfectly across all device sizes and screen resolutions
Respects prefers-reduced-motion and provides fallback experiences
Get started with just a few lines of code
import { useModeAnimation, ThemeAnimationType } from 'react-theme-switch-animation'
function ThemeToggle() {
const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({
animationType: ThemeAnimationType.CIRCLE
})
return (
<button ref={ref} onClick={toggleSwitchTheme}>
{isDarkMode ? '🌙' : '☀️'}
</button>
)
}