Dark Mode for
Any Framer Site
Add dark mode to any Framer site in minutes. ThemeShift auto-generates dark color variants from your existing palette using an inverse color algorithm — no manual color picking required.
Toggle Styles
12 styles with floating positioning
Auto Colors
Dark palette generated from your colors
No Flash
Anti-FOUC cloaking script included
Dark Mode Done Right
Everything you need to ship a polished dark mode — toggles, auto colors, companion components, and zero flash on load.
12 Toggle Styles
From simple switches to segmented controls with auto/system detection — choose the toggle that fits your design. Floating positioning included.
Auto Color Generation
ThemeShift analyzes your palette and generates dark variants automatically using an inverse color algorithm. Fine-tune any color after.
ThemeShow Component
Show or hide content based on the active theme — display different sections for light and dark mode visitors.
ThemeImage Component
Swap images per theme with a smooth crossfade effect. Perfect for logos, illustrations, and screenshots.
Anti-FOUC Script
A cloaking script loads before CSS, preventing the flash when the stored theme differs from the OS preference.
Scheduled Themes
Set themes to activate at specific times — auto-switch to dark mode at sunset, light at sunrise.
Dark Mode in 3 Steps
From install to published dark mode in under five minutes.
Install Plugin
Add ThemeShift from the Framer Marketplace. One click, no config.
Generate Colors
ThemeShift auto-creates your dark palette from existing colors. Adjust any value after.
Add Toggle
Insert a theme toggle component, pick your style, and publish. Dark mode is live.
Made For
Dark mode is no longer optional — visitors expect it. ThemeShift makes it effortless.
Portfolio Sites
Let visitors choose their viewing preference with a polished toggle.
SaaS Marketing
Match your app's dark mode on your marketing site for brand consistency.
Accessibility
Give users control over contrast and brightness for comfortable reading.
Content Sites
Reduce eye strain for readers consuming long-form content at night.
Pricing
Free on the Framer Marketplace — no signup, no card.
12 toggle styles · ThemeShow + ThemeImage companions · Anti-FOUC script · No paid tier
Common questions
Is ThemeShift really free?
Yes. Free on the Framer Marketplace, no paid tier. Install once and ship dark mode to any Framer site.
Will it cause flash-of-unstyled-content (FOUC)?
No. ThemeShift ships an anti-FOUC script that applies the saved theme before the page paints. Visitors never see the wrong theme flicker.
How does the auto-color generation work?
ThemeShift inspects your color palette and generates an inverted-luminance dark variant for each color, preserving hue and saturation relationships. Override any specific color manually.
What are ThemeShow and ThemeImage?
Companion components. ThemeShow conditionally renders different content per theme (e.g., different brand logo for light vs dark). ThemeImage swaps the image source on theme change.
Can I schedule dark mode (e.g., night-time)?
Yes. Schedule themes by time-of-day or honour the OS-level prefers-color-scheme. Visitors can override with the toggle.
Will this slow down my Framer site?
No — the runtime is <3kb gzipped and executes synchronously before paint. No network requests, no external CSS.
Ready for Dark Mode?
Install ThemeShift and add a polished dark mode to your Framer site in minutes.
Get PluginPair with…
Free ThemeShift fits inside any Proofly site.