Themes

Themes

Themes are sets of tokens in Interplay. You can create multiple themes and set up inheritance between them.

For example, you might create themes of tokens to define the styling required for light and dark modes of your applications.

You can also just add tokens to your design system without enabling additional themes if you don’t require any theming. (Your tokens will be stored in Interplay as a single theme of tokens called the ‘default’ theme.)

Theme inheritance

Themes can inherit tokens from another theme.

For example:

• You might have a dark theme that inherits the tokens from the light theme and just overrides particular tokens to create the dark styling required.

• Or you might have a common base theme, and your light and dark themes both inherit the common base tokens and override and add tokens as needed.

Creating Themes

To create additional themes:

1. Open your design system in your Interplay workspace

2. On the tokens tab, click Manage Themes

3. In the dialog that opens, check the box to enable additional themes

4. You can now add themes, and specify if a themes inherits tokens from another theme

Switching themes

Once you have created multiple themes in your design system, you can switch the active theme by choosing from the theme selector at the top right of your design system in Interplay.

The active theme is the set of tokens that is currently being displayed and edited in Interplay.

If you are dynamically passing your tokens to your components, then switching the theme will also pass the new theme’s tokens to your components.