Skip to main content

Component Themes

You can have multiple themes in a single Token Designer project. Light, dark, high-contrast, whatever you need. Each theme is just a layer of overrides on top of your default values. You're not duplicating tokens, just specifying where things differ.

Themes are managed from the CONTEXT section in the left sidebar.

How it works​

Every project starts with one context: default. That's where all your base token values live.

When you add another context like dark, it starts empty. Any token you don't override in dark just inherits from default automatically. You only need to specify the ones that change.

Adding a theme​

Click the + next to CONTEXT. Give it a name and it shows up in the dropdown.

Switching themes​

Click the Theme dropdown in the CONTEXT section and pick a different theme. The token table updates immediately to reflect that context.

Renaming and deleting​

Click the ... button next to the theme name for Rename or Delete. Deleting a theme is permanent and removes all its overrides, but the default context stays untouched.

caution

Deleting a theme removes all its overrides. The default context is not affected.

Setting overrides​

When you're on a non-default theme, the token table adds two columns: Default Value (read-only, just for reference) and Value (your override).

Click any Value cell and type a new value to override that token. An unlink icon appears once you set one. To remove the override and go back to inheriting from default, clear the value or click the unlink icon.

Rows with an empty checkbox haven't been overridden. They'll use whatever the default context has.

A practical example: dark theme​

A clean approach is to override only the semantic layer, not the raw palette:

  1. Add a dark context
  2. Switch to it
  3. In your semantic color group, override color.background, color.foreground, and any other role-based tokens
  4. Leave the raw palette tokens (all those 50-900 shades) alone

You end up with a dark theme that only stores what actually changes. Easier to maintain, and much less to dig through when something looks off.