---
title: "Switch modes — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Buttons. Expressive dark and light mode"
canonical: "https://framer.elliotli.dev/component/switch-modes"
---

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

# Switch modes

Expressive dark and light mode

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

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

## Summary

Expressive dark and light mode

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

Add a more expressive dark and light mode transition to your Framer site. Mode Switch lets visitors change the website’s appearance through animated cover-and-reveal effects instead of an instant theme change.

Choose from multiple transition styles, including Curtain and Diagonal, then adjust the motion to match the visual language of your site.

**How to use**

Drop the component onto your page and choose the mode that should be active when the site first loads. Select a transition style and direction, then customize its timing, size, shape, and appearance from the properties panel.

Each style includes controls suited to its own animation, while keeping the setup simple and fully visual.

**Features**

-   Switches between dark and light modes
    
-   Multiple animated transition styles
    
-   Custom starting mode
    
-   Adjustable transition direction
    
-   Independent cover and reveal timing
    
-   Style-specific animation controls
    
-   Adjustable switch size
    
-   Optional border
    
-   Smooth full-page theme transitions
    
-   Responsive across desktop, tablet, and mobile
    
-   No setup or coding required
    

**Refund Policy:**

Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: [hi@alicorak.com](mailto:hi@alicorak.com)

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

-   All · #9690

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-14
- **Updated**: 2026-08-16
- **Added**: 2026-07-14
- **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