How to support multi-theme

Storybook set-up

There are many ways of setting up themes/brands inside Storybook, we recommand these two:

  1. Use @storybook/addon-themes, requires 7.0+ Storybook.

  2. Use Storybook globals. Please refer to how to add a theme switcher to Storybook for more details. You can, for example, create a Storybook global called theme with possible values equal to brandA, brandB or brandC.

Loading different themes

From there, you can import your differents brands in 3 ways:

  • Generate a variant property for all your components.
  • Generate multiple components, one with each brand selected.
  • Generate multiple Figma files with all components of a brand in a file.

The method for generating your components will depend on your workflow and organization. Here are the details for each method:

Generate a variant property theme

This is done while importing each component.

Select the theme global as described in Storybook’s globals page.

The resulted components will have an extra variant property with the list of themes and all variants for each theme will be generated.

Generate multiple components

This is done by importing each component multiple times.

For each component, select only the specific theme value that you want to import.

Each component will be created using a different theme and you can then organize them in folders appropriately.

We are working on a feature to create multiple components automatically.

Generate multiple Figma files

This is done by importing all components multiple time into different files.

You can enforce the file’s theme by setting the theme in the Import defaults for this file.

We are working on features to simplify the management of multiple files.