Add a responsive light/dark theme switch to any Framer website without writing code. 100% native Framer component that remembers user preferences and works across all devices.
Framer Dark Mode Toggle – Add Light/Dark Theme Switch to Your Framer Site Instantly
Key Features
Our Framer Theme Toggle component is built with Framer's Component API for seamless integration.
Canvas & published
Works both in Framer's canvas editor and published sites
Customizable
Easily adjust colors, sizes, and transitions to match your design
Auto-detection
Automatically detects system preference for light/dark mode
Animated
Smooth, hardware-accelerated transitions between states
Lightweight
Minimal code footprint for optimal performance
Mobile-friendly
Perfectly responsive across all device sizes , better user experience
Persistent
Remembers user preference across sessions
TypeScript
Type-safe implementation for better developer experience
Common Questions
How do I install the Light–Dark Theme Toggle in Framer?
Simply copy the component from your purchase and paste it into your Framer project. It's a no-code solution that works instantly on both the Framer canvas and your published website.
Can I customize the toggle’s colors, icons, or layout?
Yes! You can fully customize the toggle using Framer’s visual property controls — including colors, icon styles, sizing, and placement — directly from the design panel.
Is the toggle mobile-friendly?
Absolutely. The toggle is fully responsive, touch-optimized, and adapts seamlessly to desktops, tablets, and mobile devices.
Can I use this component in commercial or client projects?
Yes, based on your license type: Personal covers one site, Freelance covers up to five sites, and Agency allows unlimited usage. You may not resell or redistribute the component directly.
How will I receive updates to the toggle?
All future updates are automatically available inside your Framer dashboard. You’ll always have access to the latest version.