5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb7f,

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:

Install ThemeShift from the Framer marketplace
Drag the theme 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 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.

5a:[["$","$L5d",null,{"post":{"id":"019ce594-9996-7167-843c-4ac734d590de","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"25f09ec4-366c-432d-9e12-c66cdfa06240","name":"Proofly.ae","slug":"proofly","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1675215/avatar-DmouqWfJ81ao7vxLjcwJ5O6o2RBfVv.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"884","resolved":true,"title":"ThemeShift — Dark Mode Toggle","body":"$5e","bodyJson":null,"introduction":"Dark mode toggle for Framer","slug":"themeshift-dark-mode-toggle","author":{"framerUserId":"25f09ec4-366c-432d-9e12-c66cdfa06240","name":"Proofly.ae","slug":"proofly","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1675215/avatar-DmouqWfJ81ao7vxLjcwJ5O6o2RBfVv.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/884-pscL78pETi5WNXK2cWxNp4SQYe6zVP","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/884-jwjTYb3qmGmHQG09u5WdZclORGUpYP","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/884-jgzdyLIAMfL0rnrbmVWqjQybD22tn5","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/884-EcewyvJrP7AH2HWclVW4FpmOL2M2rz","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-12T17:58:41.602Z","updatedAt":"2026-03-16T16:29:14.689Z","publishedAt":"2026-03-13T05:04:07.062Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"4cy2bb5a9u2ho4heitbc29cq5","paid":false,"categories":[{"id":"b238ea64-0ce9-413a-848d-43b73f0eea0f","name":"Styles","slug":"styles"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-13T05:04:07.062Z","updatedAt":"2026-03-13T05:04:07.062Z","reported":false}}],"$L5f"]

Suggested for you