---
title: "Theme Switch  — Free Framer component · Best of Framer"
description: "Free Framer component · by Long Nhật · Buttons. Theme Switch is a fully featured React/Framer switcher for light and dark themes."
canonical: "https://framer.elliotli.dev/component/theme-switch"
---

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

# Theme Switch

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

![Theme Switch  preview image 1](https://framer.elliotli.dev/og/component/theme-switch/5591f22498a80a6c/1600x1200.jpg)

## Summary

Theme Switch is a fully featured React/Framer switcher for light and dark themes.

## Description

Theme Switch is a fully featured React/Framer switcher for light and dark themes.

-   Supports “Light”, “Dark” and “System” modes with auto theme detection.
    
-   Particle/cloud/stars effects and smooth transitions.
    
-   Adjustable size and optional shadow for full design flexibility.
    
-   Save user theme preference to localStorage and trigger global updates.
    
-   Live preview and remix project for easy testing and integration.
    

**How to use:**

1.  Import the component into your Framer project
    
2.  Configure the properties (size, colors, default theme, shadow) in Framer controls.
    
3.  Drop onto any canvas or app for instant theme switching.
    

**Advanced features:**

-   Adds custom CSS tokens for both theme variants, updating document HTML/Body.
    
-   Listens for system theme changes and user interactions.
    
-   Accessible toggling via label/input.
    

Feel free to reach out me if you need any help (gmail: leenhatlong210@gmail.com)

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

-   All · #1160

## Details

- **Author**: Long Nhật
- **Published**: 2025-11-20
- **Updated**: 2025-11-19
- **Added**: 2025-11-09
- **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