component
Theme Toggle
By Taha
Details
- TahaAuthor
- componentType
- $10.00Price
- 2025-08-12Published
- 2026-09-12Updated
- 2025-07-31Added
- ButtonsCategories
Summary
Theme Toggle v2.0 solves this with a lightweight, high-performance script that runs before your site even renders.
Description
🌗 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. 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 Define Your Styles: Ensure your project uses Framer’s Light/Dark Color Styles. Drop & Choose: Place the component and choose Default UI for instant setup or Custom to link your own design. Install the "Flash Guard": Paste our tiny 5-line script into your Project Settings to ensure a perfect, flicker-free experience.
Introduction
Theme Toggle:Custom UI & No FOUC
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #6156