About this Component
Add a more expressive dark and light mode transition to your Framer site. Mode Switch lets visitors change the website’s appearance through animated cover-and-reveal effects instead of an instant theme change.
Choose from multiple transition styles, including Curtain and Diagonal, then adjust the motion to match the visual language of your site.
How to use
Drop the component onto your page and choose the mode that should be active when the site first loads. Select a transition style and direction, then customize its timing, size, shape, and appearance from the properties panel.
Each style includes controls suited to its own animation, while keeping the setup simple and fully visual.
Features
Switches between dark and light modes
Multiple animated transition styles
Custom starting mode
Adjustable transition direction
Independent cover and reveal timing
Style-specific animation controls
Adjustable switch size
Optional border
Smooth full-page theme transitions
Responsive across desktop, tablet, and mobile
No setup or coding required
