How we built 8 color themes into one Framer template without duplicating a single page.
Every color in Runlance is a Framer color style named Theme/*. The theme switcher only swaps those styles, so pages, CMS pages and the four product demos all follow along. Nothing is hard-coded inside a component.
Two things took longer than expected:
- Contrast. Each theme needed its own accent shade so buttons and links pass contrast on both the light and the dark surfaces. Some accents that look great on white fail on navy.
- The first paint. A small script loads the saved theme before the page renders, otherwise visitors see the default theme flash for a moment.
You pick the default theme in the Framer UI, no code.
Curious how others handle theming in Framer: color styles, variables, or separate pages?
Template: https://www.framer.com/marketplace/templates/runlance-agent-os/
