Theme Switch
A modern, customizable theme switch button for Framer projects.
Made with Workshop
Build your own component with AI
About this Component
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:
Import the component into your Framer project
Configure the properties (size, colors, default theme, shadow) in Framer controls.
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)
