Light & Dark Theme Toggle for Framer

Introduction

A complete light and dark theme switch for Framer. Drop it into your project, in the header, the footer or both, and visitors can move between themes with one click. Their choice is remembered, so returning visitors land in the theme they picked instead of being reset to your default every time.

It ships with a code override as an extra, for the components that color styles cannot reach. More on that below.

Grab it for free or pay what you want, including nothing at all.

Why Framer Needs This

Framer already handles light and dark properly at the color level. Every color style carries a light value and a dark value, so fills, text and borders switch on their own and you never design anything twice. Once the toggle is in place, most of your site follows immediately with no further setup.

Getting Started

Drop the toggle wherever you want it and it works. There is nothing to wire up, because it reads and writes the site theme directly.

The setup happens in Framer's own color styles, not in this component. Open the Assets panel, go to Styles, and create a color style for each color your site uses. Every style holds two values, one for light and one for dark.

So a style named Background might be white in light mode and near black in dark mode. Apply that style to your sections instead of picking a raw hex value, and the toggle handles both states from then on. You are never designing the same page twice.

This is also the usual reason a site only half changes theme: anything still set as a fixed hex on an individual layer has no second value to switch to, so it stays exactly as it is while everything around it moves.

Component Features

Default

Sets which theme a first time visitor sees. Choose Light, Dark, or System. System follows whatever the visitor has set on their device, so someone browsing at night in dark mode lands in dark mode without touching anything. Once they use the toggle their choice takes over.

Size

Adjusts the icon size, with a default of 16px. Increase it if the toggle is sitting on its own in a footer, decrease it when it sits inline with navigation links.

Icons

Controls how the toggle looks in each theme. You set the icon color for light mode and for dark mode separately, and you can paste your own SVG for either one. Because the two SVG slots are independent, you can use genuinely different shapes rather than the same icon recolored, which is what most theme switches do.

The Extra: A Code Override for Components

Color styles cover most of a site, but they stop at components. Anything whose appearance lives in a variant rather than a color style will not follow the theme, so a dashboard mockup or a button with its own visual states stays stuck in whichever theme you built it in.

The included override fixes that. Name your variants in pairs and apply the override to the instance:

• Desktop [Dark] and Desktop [Light] on a dashboard or product mockup.

• Neutral [Dark], Neutral [Light], Blue [Dark] and Blue [Light] on a button with more than one style.

There is nothing to configure. If none of your components use variants, you can ignore this part entirely and just use the toggle.

The Naming Contract

If you do use the override, this is the part worth reading twice. The swap works by matching the text in the variant name, not by any setting you fill in. That has two consequences:

• Keep the [Dark] and [Light] suffix exactly as it is. Renaming a variant to something else breaks the switch for that instance, silently.

• Always add new variants as a pair. A variant with no counterpart has nothing to swap to, so it will sit in one theme while everything around it changes.

Before You Publish

Check both themes. The fastest way is to toggle the theme in the preview and scroll through every page, watching for anything that stays the wrong color. Variant driven components are where problems hide, since color styles rarely get it wrong.

Shipping a Single Theme Site

If you decide you only want one theme, remove the toggle and the site stays in whichever theme is set as the default. You can leave the color styles and the paired variants in place. The unused values do no harm, and it means you can add the toggle back later without rebuilding anything.