Skip to content

Themes

Guide2026-11-09

A theme is a named list of token sets. Themes let one project in Syntope Tokens carry brands, light and dark modes or densities without duplicating every token. They follow the DTCG Resolver Module 2025.10.

In the plugin In the Resolver file Meaning
Base (base token sets) The one entry in sets Token sets that always apply
theme group A modifier One choice, such as mode
Theme A context of that modifier The token sets for one option, such as dark
Theme in use The modifier’s default The option currently chosen

How a token gets its value

Several sets can define the same token path. The plugin applies, in order:

  1. Base, set by set.
  2. Each theme group from top to bottom: the sets of its theme in use, set by set.

The last definition wins. Set names carry no meaning, only this order counts. Earlier definitions stay stored.

When sets in use define the same token, the themes tab names the winner in one line. To change it, reorder the sets in the theme or in Base, or move a theme group.

Base

Every set that is in no theme is in Base. You find them under base token sets.

  • Untick a set to leave it out of the result (not included). Tokens that get a value only from it then show No value.
  • Drag an included set, or right-click it and choose Move up or Move down, to change its place.
  • A set you add to a theme leaves Base. When it is in no theme again, it returns included.

There is no reference-only state. A set counts or it does not. If other tokens need a set’s values, keep it in Base.

Creating a theme

In the themes tab, press add theme (create theme when there are none), or + on a group heading.

Field Notes
theme group An existing group or new theme group. Fixed once the theme exists
theme name Unique in its group
token sets Tick at least one. Ticked sets move to the top and apply in the listed order, the last wins. Drag them, or right-click and choose Move up or Move down

Press save theme. Ticking the first set fills in the names: mode/dark suggests the theme dark in a new group Mode.

A theme group needs two themes

A group with one theme shows theme group needs at least two themes and is off. Its sets are in neither Base nor the result. Add a second theme to turn it on.

Switching themes

Turn on a theme’s switch in the themes tab, or use the theme: menu in the tokens tab. An active group always has exactly one theme in use, so turning one on turns the other off.

Switching is a saved project change, and undo reverses it. Values in the list and in exports follow at once. Layers do not: run sync to: selection to update them.

The token list shows a set that is in a theme as if that theme were in use, so you always see the set’s own values.

Managing themes and groups

Right-click a theme for Edit theme, Duplicate and Delete. Right-click a group heading, or use its … button, for Rename, Duplicate, Move up, Move down and Delete. You can also drag a heading. A later group wins over an earlier one.

Action Effect
Duplicate a theme Adds <name>-copy. Sets only this theme uses are copied, shared sets stay shared
Duplicate a group Adds <name>-copy with a copy of all its sets
Delete a theme or group Token sets and tokens are kept. Sets no other theme uses return to Base. If the theme was in use, the first remaining theme takes over. A group left with one theme turns off

Comparing themes

The columns icon in the tokens tab (Compare linked token sets) shows a theme group’s sets side by side, one column per theme. When each theme has one set of its own, those are linked. Otherwise a set links to the one sharing the most token names, and a note says why a set is not linked. A set that every theme uses, or that no theme uses, has nothing to compare.

  • Missing · Add … copies a token into the set that lacks it.
  • + creates a token in all linked sets.
  • Right-click a token for Delete from all linked sets, or to make differing types match.

Themes in files

Themes live in design-tokens.resolver.json, a standard DTCG Resolver document. Paths are relative to that file.

{
"version": "2025.10",
"sets": {
"base": { "sources": [{ "$ref": "tokens/primitives.tokens.json" }] }
},
"modifiers": {
"mode": {
"contexts": {
"light": [{ "$ref": "tokens/mode/light.tokens.json" }],
"dark": [{ "$ref": "tokens/mode/dark.tokens.json" }]
},
"default": "light"
}
},
"resolutionOrder": [{ "$ref": "#/sets/base" }, { "$ref": "#/modifiers/mode" }]
}

A Resolver modifier needs two contexts, so a one-theme group is stored in $extensions under eu.syntope.authoring on Base. Tokens Studio’s $themes.json is read on import and never written.