Skip to content

component

Theme Toggle

By Taha

Details

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.

120014001600174158/148/228/309/79/15
  • All · #6156