Theme Switch for Framer · free · v1.0

Styles

Three styles, three sizes, two looks.

Every switch here is live and they share one theme: pick in any of them and they all follow, along with the site above. Each card shows its switch in the theme you picked.

• systemlightdarkSegmented<pf-theme-switch>
• systemlightdarkSegmented, labelslabels
• systemlightdarkCopperlook="copper"
• Icon button (cycles)variant="icon"
• Icon, light/dark onlyvariant="icon" show-system="false"
• Switchvariant="switch"
• Switch, coppervariant="switch" look="copper"
• lightdarkTwo options, labelsshow-system="false" labels

Framer setup

Your color styles, on the visitor's terms.

Framer gives every color style a light and a dark value, then lets the visitor's device pick. Theme Switch adds the choice. Two pastes, about two minutes:

1. 01Paste the head snippetSite Settings → General → Custom Code → Start of <head> tag. It sets the theme before the page paints.
2. 02Add the componentAssets → Code → New code file named ThemeSwitch, paste framer/ThemeSwitch.tsx from the download.
3. 03Drop it in your navPick the style, size, look and accent in the properties panel. Leave Storage Key, Attribute and Default as they are.
4. 04Give colors a dark valueAssets → Colors: each color style has Light and Dark. Use color styles everywhere, publish, and switch on the live site.

<script>(()=>{function l(r){let i=window,n=i.__pfts||(i.__pfts=[]),c=s=>{for(let t of s)t.cssRules&&(/color-scheme/.test(t.media?.mediaText)&&!n.some(o=>o[0]==t)&&n.push([t,t.media.mediaText]),c(t.cssRules))};for(let s of document.styleSheets)try{c(s.cssRules)}catch{}for(let[s,t]of n)s.media.mediaText=r?t.replace(/\(prefers-color-scheme: (\w+)\)/g,(o,e)=>e==r?"(min-width:0px)":"(max-width:-1px)"):t}function u([r,i,n,c,s]){let t=document,o=t.documentElement,e;try{e=localStorage.getItem(r)}catch{}/^(light|dark|system)$/.test(e)||(e=c);let a=e=="system"?matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light":e;if(i&&o.setAttribute(i,a),n&&o.classList.toggle(n,a=="dark"),o.style.colorScheme=a,window.__pftsSync=l,s&&e!="system"){let d=window,p=d.__pftb=()=>{m.disconnect(),d.__pftb=0},f=()=>d.__pftb&&l(a),m=new MutationObserver(f);f(),m.observe(t,{childList:!0,subtree:!0}),t.addEventListener("load",f,!0),t.addEventListener("DOMContentLoaded",p)}}u(["theme","data-theme","dark","system",1]);})()</script>

Code

Script tag, React or Framer.

The same switch and the same settings in all three. The head snippet goes first in every case: it's what stops the flash.

<!-- 1. first thing in <head> (head-snippet.html) -->
<script>(()=>{function l(r){let i=window,n=i.__pfts||(i.__pfts=[]),c=s=>{for(let t of s)t.cssRules&&(/color-scheme/.test(t.media?.mediaText)&&!n.some(o=>o[0]==t)&&n.push([t,t.media.mediaText]),c(t.cssRules))};for(let s of document.styleSheets)try{c(s.cssRules)}catch{}for(let[s,t]of n)s.media.mediaText=r?t.replace(/\(prefers-color-scheme: (\w+)\)/g,(o,e)=>e==r?"(min-width:0px)":"(max-width:-1px)"):t}function u([r,i,n,c,s]){let t=document,o=t.documentElement,e;try{e=localStorage.getItem(r)}catch{}/^(light|dark|system)$/.test(e)||(e=c);let a=e=="system"?matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light":e;if(i&&o.setAttribute(i,a),n&&o.classList.toggle(n,a=="dark"),o.style.colorScheme=a,window.__pftsSync=l,s&&e!="system"){let d=window,p=d.__pftb=()=>{m.disconnect(),d.__pftb=0},f=()=>d.__pftb&&l(a),m=new MutationObserver(f);f(),m.observe(t,{childList:!0,subtree:!0}),t.addEventListener("load",f,!0),t.addEventListener("DOMContentLoaded",p)}}u(["theme","data-theme","dark","system",1]);})()</script>

<!-- 2. your dark colors -->
<style>
  :root { --bg: #fafaf9; --text: #1c1917; }
  html[data-theme="dark"] { --bg: #0f0e0d; --text: #f5f5f4; }
</style>

<!-- 3. the switch, anywhere, and the script once -->
<pf-theme-switch variant="segmented" look="copper"></pf-theme-switch>
<script src="theme-switch.min.js" defer></script>

Works with

• FramerHead snippet in Custom Code + a code component with a properties panel
• WebflowSnippet in Head code, script in Footer code, <pf-theme-switch> in an Embed
• Plain HTML / any siteSnippet in <head>, one script, <pf-theme-switch> anywhere
• WordPressSnippet in the header, a Custom HTML block for the switch
• ShopifySnippet in theme.liquid, the script as a theme asset
• Squarespace, WixCode Injection / Custom Code (plan must allow custom code)
• React, Next.js<ThemeScript /> in <head>, <ThemeSwitch />, useTheme()

What it does

• Made for Framer. Framer switches your color styles' dark values only when the visitor's device is in dark mode. Theme Switch lets the visitor choose, and every fill, text color and border that uses a color style follows.
• No flash. A head snippet (1,020 bytes) sets the theme before the page paints, so a visitor who picked dark never sees a white page first, on a Framer site, in Webflow or in Next.js.
• Three styles. A segmented System / Light / Dark control, an icon button that cycles, or a switch. Three sizes, a neutral or copper look, your accent color.
• Remembers, follows, syncs. The choice is saved in the browser. On System it follows the device as it changes. Other tabs switch too. Every switch on the page stays in step.
• Works with your CSS. It sets data-theme and the dark class on <html> (Tailwind's class strategy works as is) plus color-scheme, and makes CSS written for prefers-color-scheme follow along.
• Accessible. Native radio buttons in a named group, a real switch, a pressed toggle; arrow keys, Space and Enter; a visible focus ring; labels for screen readers. Reduce Motion turns the fade off.
• Small. 2.95 KB gzipped for the script build, no dependencies. A cross-fade with the View Transitions API where the browser has it, nothing where it doesn't.