---
title: "ThemeShift — Dark Mode Toggle · Best of Framer"
description: "Free Framer plugin · by Proofly.ae · Styles. Dark mode toggle for Framer"
canonical: "https://framer.elliotli.dev/plugin/themeshift-dark-mode-toggle"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/ThemeShift — Dark Mode Toggle

# ThemeShift — Dark Mode Toggle

Dark mode toggle for Framer

[View on Framer](https://framer.com/marketplace/plugins/themeshift-dark-mode-toggle/?via=elliot-li)

![ThemeShift — Dark Mode Toggle preview image 1](https://framer.elliotli.dev/og/plugin/themeshift-dark-mode-toggle/e4fceb427c35bc46/1600x1200.jpg)

## Summary

Dark mode toggle for Framer

## Description

The dark mode toggle Framer doesn't have a complete theme toggle and color scheme switcher with zero flash guaranteed.

ThemeShift lets your visitors switch between light and dark mode on your Framer site. It works with Framer's built-in color styles, no custom CSS, no code overrides, no copy-pasting. Just install, drag, and publish.

**Why ThemeShift?**

Every other dark mode solution for Framer has the same problem: the page flashes white before switching to dark. ThemeShift eliminates this completely. Your site loads in the correct theme from the very first pixel.

**What's included:**

**Theme Toggle Component** Drag a beautiful color palette switcher onto your site. Choose from 4 styles: pill switch, icon button, segmented control, or minimal dot. Fully customizable from Framer's property panel colors, size, border radius, and icons.

**System Detection** Automatically matches the visitor's operating system preference on first visit. If their phone is in dark mode, your site is in dark mode.

**Remembers Visitor Choice** Saves the visitor's theme preference. When they come back tomorrow, the site loads in their chosen color scheme. No flash, no reset.

**Zero Flash (Anti-FOUC)** The #1 problem with every other solution. ThemeShift applies the saved theme before the page renders. No white flash. No flicker. Just the right theme, instantly.

**Auto-Generate Dark Colors** — Project doesn't have a dark color palette set up yet? ThemeShift can auto-generate dark variants for your existing color styles to get you started fast.

**How it works:**

1.  Install ThemeShift from the Framer marketplace
    
2.  Drag the theme toggle component onto your page
    
3.  Customize the style from the property panel
    
4.  Publish dark mode works immediately
    

Works with Framer's native light/dark color styles. If you've already set up light and dark color tokens, ThemeShift uses them automatically. No extra configuration.

**Works with:**

-   All Framer color styles and color schemes (light/dark tokens)
    
-   Any custom color palette
    
-   Custom fonts and typography
    
-   Framer CMS pages
    
-   All breakpoints (desktop, tablet, mobile)
    
-   Framer's built-in animations and effects
    

**Roadmap:**

-   Theme-aware images (show different images per theme)
    
-   Conditional content (show/hide sections per theme)
    
-   Animated toggle styles
    
-   Floating fixed-position toggle
    
-   Scheduled themes (auto dark mode at sunset)
    
-   Transition effects
    

Built by Proofly makers of PageLock, the only truly secure page protection for Framer.

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

-   All · #218

## Details

- **Author**: Proofly.ae
- **Published**: 2026-03-13
- **Updated**: 2026-03-16
- **Added**: 2026-03-12
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds