---
title: "Theme Toggle — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Taha · Buttons. Theme Toggle v2.0 solves this with a lightweight, high-performance script that runs before your site even renders."
canonical: "https://framer.elliotli.dev/component/theme-toggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Theme Toggle

# Theme Toggle

Theme Toggle:Custom UI & No FOUC

[View on Framer](https://framer.com/marketplace/components/theme-toggle/?via=elliot-li)

![Theme Toggle preview image 1](https://framer.elliotli.dev/og/component/theme-toggle/06232356ed3a4386/1600x1200.jpg)

## 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.

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.
        

## Rank history [How rankings work →](/terms#rankings)

-   All · #9762

## Details

- **Author**: Taha
- **Price**: $5.00
- **Published**: 2025-08-12
- **Updated**: 2026-10-11
- **Added**: 2025-07-31
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything