5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.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:T979,

Copy it into your project, add light and dark color styles, choose how it behaves — and you’re done.

No styling. No setup headaches. It just works.

Why this is different

This isn’t a pre-styled toggle or animated gimmick.

Theme Toggler is a lightweight, invisible theme controller that adapts to your existing design.

You design the UI.

What you get

Zero styling required — works with any button, icon, or custom design
Global control — one component updates light & dark mode across the entire site
Two powerful modes — click to toggle or automatic scroll-based themes
Remembers user preferences — visitors don’t need to toggle again
Feels native — instant switching with no awkward flashes or behavior

Setup in under a minute

Copy the component into your Framer project
Drag it onto the page
Choose Toggle or Scroll in the properties
Pick your initial theme

That’s it. Your site now supports light and dark mode.

Toggle mode (click to switch)

Perfect for a switch, button, icon, or any custom theme control.

Drop the component into the same frame as your custom toggle or icon
The entire area becomes clickable
One click switches the theme instantly
The user’s choice is remembered automatically

You design the button — the component handles everything else.

Scroll trigger mode (automatic by section)

Perfect for sites where the mood changes as users scroll — without adding any UI.

Dark hero → light content → dark footer
The theme updates automatically while scrolling
Smooth, polished transitions between sections
No visible controls required

Once placed on the page, it quietly runs the experience in the background.

One small requirement

Your project needs light and dark Color Styles for the theme change to be visible.

If you already use Framer styles — you’re good to go.

Support

Have questions or need help? Reach out at hi@aleksihuusko.com

5a:[["$","$L5d",null,{"post":{"id":"019c6f57-5e7b-797f-8a60-85a6edba2afa","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"fc4fca6c-22d0-4791-8cf5-0edb616f9357","name":"Aleksi Huusko","slug":"aleksihuusko","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fc4fca6c-22d0-4791-8cf5-0edb616f9357/gaccxym6","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TGRYxYKYixByNNcpsCxE","resolved":true,"title":"Theme Toggler","body":"$5e","bodyJson":null,"introduction":"Global Light & Dark Mode for Framer","slug":"theme-toggler","author":{"framerUserId":"fc4fca6c-22d0-4791-8cf5-0edb616f9357","name":"Aleksi Huusko","slug":"aleksihuusko","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fc4fca6c-22d0-4791-8cf5-0edb616f9357/gaccxym6","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TGRYxYKYixByNNcpsCxE/theme-toggler-amuuPosxVX6WdX4TR3iHlXNlU2pR6D","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-02T11:36:29.249Z","updatedAt":"2026-02-18T19:43:25.105Z","publishedAt":"2026-02-18T06:02:02.747Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://theme-toggler.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_oT5VKWGVmE3UqamPInHACc9DIK4NlPsvaD7e20MqMGx","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"rleLz5pZmD8ApRLRptkz","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-18T06:02:02.747Z","updatedAt":"2026-02-18T06:02:02.747Z","reported":false}}],"$L5f"]

Suggested for you