Reuse Style Values

Open Themes in Studio to create or edit shared style values. These named values are also called tokens or CSS variables.

For example, define this in the project token stylesheet:

:root {
  --color-primary: #66c9e6;
  --radius-panel: 18px;
}

Then use the names in a component:

.panel {
  color: var(--color-primary);
  border-radius: var(--radius-panel, 18px);
}

The value after the comma is a fallback used when that variable is missing. A missing variable without a fallback is a save/build error.

Save and check Preview. Change the shared color once to update all rules that use it. See Themes for creating alternate color sets.