Themes
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:
- Base, set by set.
- 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.
