Storybook Addon Background Themes

Storybook Addon Background Themes can be used to change themes inside the preview in Storybook. The themes are simple sets of CSS custom properties.

Installation

npm i -D storybook-addon-background-themes

Configuration

Then, add following content to .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-background-themes'],
};

Usage

Add a backgroundThemes property to the configuration aparameters of preview.js:

export const parameters = {
  backgroundThemes: {
    base: {
      // CSS custom properties that will be applied for each theme
      "--some-base-custom-property": "blue",
    },
    themes: [
      {
        name: "Light",
        previewValue: "#000",
        properties: {
          "--some-custom-property-for-light-mode": "#fff"
        },
      },
      {
        name: "Dark",
        previewValue: "#000",
        properties: {
          "--some-custom-property-for-dark-mode": "#000"
        },
      },
    ],
  },
};