Smart Theme Toggle
Fully customizable light/dark mode toggle with custom sounds, colors, animations and hover effects. Auto-detects user system theme preferences on load.
Make it with Workshop
Build your own component with AI
Fully customizable light/dark mode toggle with custom sounds, colors, animations and hover effects. Auto-detects user system theme preferences on load.
Make it with Workshop
Build your own component with AI
🌙☀️ Smart Theme Toggle Component
Transform your website's user experience with this intelligent theme switching component that seamlessly adapts to your users' preferences.
🎯 Smart Auto-Detection
Automatically detects and respects your users' system theme preferences
Instantly switches between light and dark modes
Remembers user choices across sessions
🎨 Fully Customizable Design
Adjust button sizes from compact (20px) to large (60px)
Choose any colors for light/dark backgrounds and icons
Customize border radius for perfectly rounded or sharp edges
Add elegant shadow effects with one click
Fine-tune hover and tap animations for premium feel
🔊 Interactive Audio Experience
Built-in click sound effects to enhance user engagement
Upload any custom sound file you want (MP3, WAV, etc.)
Adjustable volume control from silent to full volume
Professional audio handling with graceful fallbacks
⚡ Advanced Technology
Automatically extracts and applies your site's CSS theme tokens
Smooth spring animations powered by Framer Motion
Global theme state management across your entire site
Optimized for performance with client-side rendering
Works seamlessly with Framer's design system
🎮 Smooth Interactions
Satisfying scale animations on hover and tap
Elegant icon transitions with rotation effects
Instant visual feedback for better user experience
Mobile-optimized touch interactions
Simply drag and drop into your Framer project - no coding required! All customization options are available through Framer's intuitive property panel.
Ready to give your users the perfect viewing experience? This component handles all the technical complexity while giving you complete creative control over the design.
