How do I install the theme toggle in Framer?

Copy the component from your purchase and paste it into any Framer project. It works instantly inside canvas and published sites.

Can I customize the toggle colors and icons?

Yes. Use Framer’s built-in property controls to customize colors, icons, and sizes visually.

Does this work on mobile devices?

Yes. The toggle is fully responsive and touch-optimized for all screen sizes.

Can I use this in client projects or templates?

Yes. Use depends on your license: Personal = 1 site, Freelance = 5 sites, Agency = unlimited. Reselling the actual component is not allowed.

Updates are automatically available via your Framer project dashboard.

Framer Dark Mode Toggle – Add Light/Dark Theme Switch to Your Framer Site Instantly

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.

Want to see it in action? Want to see it in action? ▶️ Watch on YouTube

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

Pricing

Personal
One Time Purchase

Ideal for single projects

1 published Framer site
Personal or client projects
NO RESELLING allowed

Freelance
One Time Purchase

Perfect for 10 client projects

Up to 10 published sites
Template usage (non-resellable)
NO RESELLING allowed

Agency
One Time Purchase

Unlimited sites & teams

Unlimited Framer sites
White-label for clients
NO RESELLING allowed

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.