Spring Switch

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.

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

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

Preview and Publish

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