ThemeShift — Dark Mode Toggle
Add a dark mode toggle to your Framer site in seconds. Detects system preference, remembers visitor choice, and loads the correct theme instantly no white flash, no code overrides. Works with Framer's native color styles. Just drag, customize, and publish.
About this Plugin
The dark mode toggle Framer doesn't have 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:
Toggle Component Drag a beautiful toggle 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 preference. When they come back tomorrow, the site loads in their chosen theme. 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 dark mode colors set up yet? ThemeShift can auto-generate dark variants for your existing color styles to get you started fast.
How it works:
Install ThemeShift from the Framer marketplace
Drag the toggle component onto your page
Customize the style from the property panel
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 (light/dark tokens)
Custom fonts and typography
Framer CMS pages
All breakpoints (desktop, tablet, mobile)
Framer's built-in animations and effects
Coming soon:
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.
