Multiple themes

It is possible to have multiple themes in the same project if you use config file. Below we will go through two ways to do it.

This page assumes that you have read "Build your theme".

Same color names

If you have two themes that will be switched between in the same interface, you'll likely use the same color names in both themes. This means that you can put both in a config file, and get design tokens that can be switched between in Figma, and which generates two CSS files.

The config file above is not generated from the themebuilder, and it is a good idea to have a developer involved in the process when creating such config files.

It is possible to validate the config file in the themebuilder. Use the "Continue from configuration file" button on the front page. This validation will not give you errors if the color names are different, so it is important to double-check this manually.

Different color names

If you have different color names, this will not work in design tokens and Figma. In this case, you will need to create two config files, one for each theme. You can then run the build command twice, once for each config file.

It is common to have to do it this way if you have a repository that collects all design tokens and CSS for multiple applications.