---
title: "Smooth Theme Toggle — Framer component · Best of Framer"
description: "$15.00 · Framer component · by David McBacon · Buttons. Cinematic dark/light mode switcher"
canonical: "https://framer.elliotli.dev/component/smooth-theme-toggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Smooth Theme Toggle

# Smooth Theme Toggle

Cinematic dark/light mode switcher

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

![Smooth Theme Toggle preview image 1](https://framer.elliotli.dev/og/component/smooth-theme-toggle/e4c1261eeba85d16/1600x1200.jpg)

## Summary

Cinematic dark/light mode switcher

## Description

**Animated Theme Toggle** is a powerful component for Framer that enables seamless dark mode switching with stunning view transition animations.

Built on Framer's native theming system, it automatically syncs with system preferences and persists user choices across sessions.

The component offers three flexible button types: preset icons (moon/sun), custom icon components, or fully customized buttons with variant support.

Choose from 14 beautifully crafted animation presets including circular reveals, directional wipes, diagonal transitions, and split effects that create smooth, cinematic transitions between themes.

Key features include:

-   **14 animation presets** with customizable duration and easing
    
-   **Three button modes**: preset icons, custom icons, or fully custom components
    
-   **Full styling control**: size, colors, borders, shadows, and corner radius
    
-   **Automatic theme persistence** via localStorage
    
-   **System preference sync** for seamless user experience
    
-   **Accessible** with proper ARIA labels
    
-   **SSR-compatible** with proper hydration handling
    

Perfect for creating polished, professional websites with delightful theme-switching experiences that feel native and performant.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-090u5i1e-UPzjLsKojy2Nz5JTAR17Pbr6wqPYJA)

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

-   All · #1750

## Details

- **Author**: David McBacon
- **Price**: $15.00
- **Published**: 2025-11-24
- **Updated**: 2026-03-28
- **Added**: 2025-11-20
- **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