https://framer.com/m/Themeswitcher-4HYLKp.js
ThemeSwitcher
ThemeSwitcher is a row of swatches wired to ThemeLeaderPro’s recolor store. A preset is a full Theme JSON keyed by token slot, so one click repaints every component on the page — buttons, borders, fields, charts and text alike — in light and dark.
Examples
Live specimens. These really do recolour this page — click a swatch and the whole site follows until you pick Default again.
Twenty-four colours
One instance, twenty-four complete themes. Each preset is a full Theme JSON: all fifty-nine token slots — primary, the text ramp, surfaces, fields, borders, the theme and gray scales — each with a light and a dark value. Clicking a swatch repaints this page live; Reset puts the project theme back.
Direction, labels and size
The same six themes vertically with labels, and horizontally at a larger swatch size. Labels come from the preset keys; the swatch colour is the preset’s own primary unless you set one.
checked false
checked true
Props
The controls exposed on the instance panel. The three presets[] rows are the fields of each array item.
Usage
Guidance carried over from the component definition.
Reach for ThemeSwitcher
Letting a visitor try the system in their own colour — the whole page repaints from the tokens.
Brand or campaign variants of one page, without a second theme or a second build.
Design reviews where the question is whether a layout survives a palette change.
Any page already on ThemeLeaderPro: the switcher writes to its recolor store, never to your styles.
Reach for something else
Light and dark. That is ThemeLeaderPro’s own toggle; this switches palettes, not modes.
A one-off accent on a single element. Set the colour on that node instead of repainting the page.
Storing a user’s brand across a whole app. This keeps one localStorage key; real preferences belong in your data layer.
Io — UI Basics
Every switcher above is a live ThemeSwitcher instance. It writes to the ThemeLeaderPro recolor store at runtime; the project’s Color Styles are never modified.