Framer’s native color styles are great, but giving your visitors the power to switch themes manually is even better.
Theme Toggle provides a professional-grade solution to handle theme persistence and system-syncing flawlessly.
✨ Key Features
Persistence Built-In: Remembers the user’s choice across sessions using localStorage—so they don’t have to toggle it every time they return.
System-Aware: Automatically matches the user's OS theme (Light or Dark) on the first visit.
Two Flexible Styles: Toggle between a sleek Switch or a classic Button layout instantly.
Zero Flash of Unstyled Content (FOUC): Optimized to ensure the theme loads instantly without that annoying "white flash."
Fully Customizable: Adjust icons, background colors, border radius, and animations directly from the Framer property panel.
🎨 Design Options
Icon Library: Built-in Sun, Moon, and Monitor icons.
Custom Variants: Link your own design variants to the toggle for 100% brand alignment.
Spring Animations: Silky-smooth transitions that feel native to the Framer ecosystem.
🧩 Perfect For:
SaaS Dashboards: Essential for developers and power users.
Blogs & Documentation: Improve readability for long-form content.
Professional Portfolios: Showcase your design versatility in both themes.
🛠️ How to Set It Up
Ensure your project uses Framer’s Light/Dark Color Styles.
Drop the Smart Theme Toggle onto your navigation bar or footer.
Choose your style (Button or Switch) and customize the colors.
Publish. The component handles the rest of the logic for you
Taha
