Guides

Theming

Theming

Customize colors, spacing, and typography without touching component internals.

March 5, 2026

Written by Sasha Lindqvist

How theming works

Visual styling is driven by a small set of design tokens rather than deeply nested overrides. Change a token once and every component that references it updates automatically.

Light and dark mode

Every token accepts both a light and a dark value. When no dark value is provided, the light value is reused automatically, so partial theming is always safe.

Overriding individual components

For one-off adjustments that shouldn't affect the whole theme, pass a style override directly to a single component instance rather than editing the shared tokens.

  • Prefer token changes for anything used more than once

  • Reserve per-component overrides for genuinely unique cases

  • See Components for the full list of what can be themed

Create a free website with Framer, the website builder loved by startups, designers and agencies.