---
title: "Theme Slider — Framer component · Best of Framer"
description: "$10.00 · Framer component · by yahya · Carousels. A draggable Theme Switcher"
canonical: "https://framer.elliotli.dev/component/theme-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Theme Slider

# Theme Slider

A draggable Theme Switcher

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

![Theme Slider preview image 1](https://framer.elliotli.dev/og/component/theme-slider/7423f9e73c3c0868/1600x1200.jpg)

## Summary

A draggable Theme Switcher

## Description

**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.

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

-   All · #7833

## Details

- **Author**: yahya
- **Price**: $10.00
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow