Theme Toggle

🌗 The Pro-Grade Solution for Framer Themes Framer’s native color styles are powerful, but manual theme switching is often a headache. Most toggles suffer from "white flashes" on load or forget user preferences when the page refreshes.

1. Theme Toggle v2.0 solves this with a lightweight, high-performance script that runs before your site even renders. It’s the most robust way to give your visitors control over their viewing experience.

   ✨ What’s New in v2.0?

   • Custom UI Mode: Use our "Link" property to connect your own unique Framer components. The logic automatically triggers your "Light" and "Dark" variants.

   • Persistence 2.0: Deep localStorage integration ensures a visitor’s choice is remembered forever (or until they change it).

   • Smart Versioning: Effortlessly reset visitor preferences when you make major design updates using our new internal versioning logic.

   • Strong FOUC Prevention: Includes a specialized CSS snippet that eliminates the "Flash of Unstyled Content," ensuring your site stays dark from the very first millisecond.

   • Dynamic Properties: A cleaner property panel that adapts to your workflow—hiding unnecessary settings when you’re using a custom design.

   🎨 Design & Flexibility

   • Preset Styles: Choose between a silky-smooth Switch or a classic Button if you want to go fast.

   • Total Brand Alignment: Customize every detail—icon colors, border styles, padding, and spring transitions—directly from the panel.

   • Variant Syncing: When using custom components, the toggle intelligently switches your component variants to match the site's theme.

   🛠️ 3-Step Setup

   1. Define Your Styles: Ensure your project uses Framer’s Light/Dark Color Styles.

   2. Drop & Choose: Place the component and choose Default UI for instant setup or Custom to link your own design.

   3. Install the "Flash Guard": Paste our tiny 5-line script into your Project Settings to ensure a perfect, flicker-free experience.