Animated Theme Toggler

A smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching between light and dark themes.

Library

Animations (Svelte)

Framework

Svelte

Type

block

License

MIT

Install

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/animated-theme-toggler.json

Files

• src/lib/components/magic/animated-theme-toggler/animated-theme-toggler.svelte
• src/lib/components/magic/animated-theme-toggler/index.ts
• src/lib/utils.ts

Source

https://github.com/SikandarJODD/animations

Categories

• Action Components
• Svelte Action Components
• Tailwind CSS Action Components
• Button Components
• Svelte Button Components
• Tailwind CSS Button Components
• Theme Toggle Components
• Tailwind CSS Theme Toggle Components
• Toggle Button Components
• Tailwind CSS Toggle Button Components

More from Animations (Svelte)

• Interactive Hover Button
• Pulsating Button
• Rainbow Button
• Ripple Button
• Shimmer Button
• Shiny Button
• Animated Background
• Animated Beam
• Animated Circular Progress Bar
• Animated Gradient Text
• Animated Grid Pattern
• Animated List