---
title: "Spring Switch — Free Framer component · Best of Framer"
description: "Free Framer component · by yahya · Buttons. This component fully supports native color themes in framer for light and dark mode, meaning, you set the color styles for light and dark and then…"
canonical: "https://framer.elliotli.dev/component/spring-switch"
---

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

# Spring Switch

A spring Light to Dark mode component

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

![Spring Switch preview image 1](https://framer.elliotli.dev/og/component/spring-switch/c231cc71c3741ea5/1600x1200.jpg)

## Summary

This component fully supports native color themes in framer for light and dark mode, meaning, you set the color styles for light and dark and then bring in the spring switch to do…

## Description

This component fully supports native color themes in framer for light and dark mode, meaning, you set the color styles for light and dark and then bring in the spring switch to do the magic for you.

Here's how to set it up;

### Make sure you have color styles set for light and dark set.

This is crucial for the component to work , because what it does is switching between the dark and light versions of your color styles.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-czfa6fkf-DL9N6qfQtE3osHpyu8ya3pCmk6n0uF)

### Drag the component to the canvas and set it's position to absolute or fixed, this is to make sure it doesn't take up space in the page

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-czfa6fkf-QNHaj8eRE4BPXw5clVh331h4UXrMyi)

### Design your custom light and dark mode handles in Framer.

This component has been made with flexibility in mind, meaning you design the two icon variations and simply connect them via slots of the srping switch component.

As you can see in the image attached, two icons designed and then connect via slots on the component

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-czfa6fkf-g3p8Ab4WLYUluz3gEdqqITTPOoXgQa)

### Preview and Publish

That's all you need to make it work. If you face any issues, reach out.

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

-   All · #880

## Details

- **Author**: yahya
- **Published**: 2026-03-03
- **Updated**: 2026-03-02
- **Added**: 2026-02-24
- **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