Theme Slider

A draggable Theme Switcher

This component creates a draggable theme switch that allows users to toggle between light and dark modes. It dynamically updates CSS variables and the background/text colors based on the switch’s position, and persists the user’s theme preference in local storage. Unlike the user toggle switch, this updates styles in real time as you drag visualizing the entire theme switching experience. All you need to do is dropping the component on the page, them set your framer color tokens for light and dark mode for each token. Everything is automatically handled by the switcher to convert light to dark mode as the user drags the switcher.

A draggable Theme Switcher