Dark Mode in Framer Templates: How It Works and How to Add It

The part Framer gives you

Every color style in Framer can carry two values, one for light and one for dark. When the visitor's system is set to dark, the site uses the dark values. If every color on the site comes from a style rather than a typed-in hex, dark mode is mostly done the moment you fill in the second column. If half the colors are hard-coded, you will be chasing them for a week.

The part you add

Following the system setting is fine, but people expect a switch. That needs a small code component: it sets the color scheme on the page, remembers the choice, and shows a sun or a moon. Wayfare has one in the nav. It is about 60 lines and has no dependencies, so it survives Framer updates.

What I got wrong first

• Pure black. The photos on a travel site are warm, and black next to them looks like a hole. The dark values ended up as warm browns pulled from the photo shadows.

• Veils over photos. A gradient that reads on a cream page can disappear on a dark one. Every overlay needed checking in both modes.

• Text baked into components. Anything that carries its own color override does not flip. Two labels in the phone nav stayed black until I re-pointed them at the style.

A checklist

• Every fill, border and text color comes from a style.

• Every style has a dark value, not just the obvious ones.

• Scroll every page in both modes on a phone.

• Test the switch survives a reload.

• Check the social image still looks right, since it is one image for both.

Templates on this site with it

Wayfare ships with the toggle and both values on every style. The rest follow the system setting where they have dark values, and I am adding the switch to the others as I refresh them.