Skip to content
UX Atlas
Design systemCraft conventionAdvanced

Theming

Supporting several visual identities from one system, which is a token architecture problem before it is a design problem.

Definition

Theming remaps the semantic token layer to produce a different visual identity from the same components. Common cases are light and dark modes, high contrast, and multi-brand or white-label products.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Decisions to make early
  3. Continue from here

Decisions to make early

  • What varies: colour only, or also type, spacing, radius and density? Each addition multiplies the testing surface.
  • Where the boundary is: which tokens are themeable and which are fixed.
  • How themes are delivered: CSS custom properties, build-time generation, or runtime switching.
  • How contrast is verified per theme, since a compliant light theme says nothing about the dark one.
  • Whether customers can supply their own colours, which requires automatic contrast correction rather than trust.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Depends on

Get these right first, or this one will not hold.

  • Design TokensDesign system

    Theming is token remapping. Without a semantic token layer there is nothing to remap.

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.