Design your dream toggle button and let our component handle all the theme-switching complexity. From simple switches to cinematic clip-path animations, transform any design into a production-ready theme switcher instantly. 58 premium transition styles included!
This makes it perfect for anyone who wants a smooth theme toggle or an animated theme toggle with professional-grade motion design.
The Mask Theme Toggle revolutionizes how designers implement dark mode and light mode in Framer. It's not just a basic dark mode toggle or light mode toggle – it's a complete, adaptive theme management system with professional cinematic transitions, seamless mask transition effects, and support for system theme detection to ensure everything stays synced automatically.
Unlike pre-styled toggles that limit creativity, this custom theme toggle lets you design any style you want – from a minimalist sun-moon toggle to an elaborate animated masterpiece. Whatever your design vision, the component automatically transforms it into a modern theme toggle button with 58 stunning mask transition, making it a powerful interactive theme switch solution for any project.
This isn't just a theme toggle; it's a professional-grade theme system with Hollywood-level transitions. Design a light-dark switch that matches your brand, connect it once, and instantly get a fully functional, production-ready theme toggle – all without writing code. Whether you need a dark light toggle for accessibility or an expressive theme toggle animation for marketing pages, this component handles it instantly.
Circle Expand – Classic radial expansion from button position, total 10 transition origins
Horizontal Wipe – Smooth left-to-right or right-to-left reveal, total 4 transition origins
Vertical Wipe – Top-to-bottom or bottom-to-top transition, total 4 transition origins
Rectangle Wipe – Dynamic box expansion from any corner, total 10 transition origins
Diamond Wipe – Elegant diamond-shaped reveal animation, total 10 transition origins
Hexagon Wipe – Modern six-sided geometric transition, total 10 transition origins
Octagon Wipe – Sophisticated eight-sided reveal effect, total 10 transition origins
No Animation – Instant theme switching for minimal preference, total 10 transition origins
All animations support smart origin positioning – choose button position or custom screen positions (top, bottom, left, right, center, corners) for unique directional effects. These clip path animation options create a visually rich and smooth theme toggle experience.
Add the Component: Copy and paste the "Mask Theme Toggle" into your Framer project
Design Your Toggle Variants: Create two separate variant design – one for light mode appearance and one for dark mode appearance
Connect Your Designs: Link your light and dark theme variants to the component's "Light Mode Variant" and "Dark Mode Variant" properties
Choose Animation Style: Select from 8 animation types in the right-hand panel
Customize Origin: Pick where animations start from – button position or custom screen locations
Set Initial Theme: Choose Auto (system), Light Mode, or Dark Mode as default, ensuring system theme detection behaves correctly
Add Interactions (optional): Enable hover toggle, keyboard shortcuts, or theme toggle with sound
Adjust Duration: Fine-tune animation speed (200–2000ms) for your desired feel
Preview & Test: Check theme persistence across page refreshes
Publish: Your toggle automatically remembers user preferences
Animation Type – Choose from 8 clip-path animation styles (circle, horizontal, vertical, rectangle, diamond, hexagon, octagon, none)
Animation Duration – Adjust speed from 200ms (snappy) to 2000ms (cinematic)
Animation Origin – Select "Button Position" or "Custom Position" for where animation starts
Custom Origin Position – Choose exact starting point (center, corners, edges) when using custom origin
Initial Theme – Set default to Auto (system), Light Mode, or Dark Mode
Light Mode Variant – Connect your custom light theme toggle design
Dark Mode Variant – Connect your custom dark theme toggle design
Enable Keyboard Shortcut – Toggle via keyboard for accessibility
Custom Shortcut – Define your own key combo (e.g., "ctrl+s" – auto-detects ⌘ on Mac)
Enable Sound – Add audio feedback for satisfying interactions
Custom Sound – Upload your own MP3/WAV file
Sound Volume – Fine-tune audio level (0–1 scale)
Enable Hover Toggle – Switch themes on mouse hover (experimental), ideal for an interactive theme switch
Turn any design into a functional theme toggle – icons, illustrations, text, images, or complex component compositions. No design limitations. Perfect for anyone wanting a custom theme switcher that adapts to any creative direction.
58 professional transition styles with smart directional control. Every transition feels polished and production-ready, creating an animated theme toggle experience that feels premium.
Remembers user preferences across sessions using localStorage. Respects system theme changes in real-time, ensuring your theme switch stays consistent on every device.
Works flawlessly on desktop, tablet, and mobile. Touch-optimized with proper hit targets.
Keyboard navigation support, ARIA labels ready, screen reader friendly, and WCAG compliant.
Optional audio cues with custom sound upload and volume control for satisfying interactions. Perfect for creating a lively theme toggle with sound.
SSR-compatible, cross-browser support (Chrome, Firefox, Safari, Edge), and optimized performance.
Animations can start from button position or 9 custom screen positions (center, 4 edges, 4 corners), enhancing mask transition creativity.
Fully visual configuration through Framer's property panel. No coding knowledge needed. Easy to customize.
Personal Portfolios & Blogs: Showcase your design taste with cinematic theme transitions that make visitors remember your site.
SaaS Dashboards: Offer adaptive theming that supports both light and dark work environments with professional animations and a clear theme switch experience.
E-Commerce Stores: Reduce eye strain during long browsing sessions while showcasing products beautifully in both themes.
Documentation Sites: Empower developers with keyboard shortcuts and quick theme switching for code readability.
Marketing & Landing Pages: Create wow-moments with hexagon or diamond wipe animations that highlight your attention to detail and animated theme toggle effects.
Design Showcases: Let clients explore your work in both themes with smooth, distraction-free transitions and smooth theme toggle interactivity.
Educational Platforms: Reduce eye strain during long study sessions with automatic system theme detection.
News Sites & Blogs: Give readers comfort and control with accessible theme switching.
Agency Websites: Demonstrate technical prowess with advanced clip-path animations that competitors can't match.
App Landing Pages: Match your app's native theme switching behavior with identical animation styles and consistent theme toggle behavior.
View Transitions API: Uses modern browser API for hardware-accelerated animations
Framer Motion Integration: Smooth, performant transitions powered by industry-standard library
SSR CSS Extraction: Automatically handles Framer's server-side rendered styles
LocalStorage Sync: Persistent theme preferences with fallback handling
System Theme Detection: Automatically syncs with OS-level dark mode settings
Event Broadcasting: Custom events for advanced integrations
Graceful Degradation: Falls back to instant switching on unsupported browsers
With the Mask Theme Toggle, your designs transcend basic light/dark mode. Create memorable, cinematic, and fully interactive theme experiences that users love, powered by a polished theme switcher that blends clip path animation with smooth theme toggle behavior.
Made with ❤️ by Soyeb
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
Soyeb
