Custom Theme Switcher

Theme switcher tool addon that changes the themes using CSS custom properties

View on Github

Storybook Custom Theme Switcher

Storybook custom theme switcher

This addon can be used to set a data attribute in Storybook's iframe HTML element triggering a toggle between your custom themes.

Example styles:

:root [data-theme="theme1"] {
  --white: #000;
  --black: #fff;
}

:root [data-theme="theme2"] {
  --white: #fff;
  --black: #000;
}

:root [data-theme="theme3"] {
  --white: #696969;
  --black: #700404;
}

Installation

NPM / Yarn

npm i -D storybook-custom-theme-switcher

yarn add storybook-custom-theme-switcher -D

Add the addon to .storybook/main.js:

module.exports = {
  addons: ["storybook-custom-theme-switcher"],
};

Add parameters options to .storybook/preview.js:

export const parameters = {
  theme: {
    selector: "body",
    dataAttr: "data-theme",
    /* Put all theme options in
    themeOptions. You can name
    customeTheme as you want.*/
    themeOptions: {
      default: "", // empty string for option to get back to default theme 
      customeTheme1: "theme1",
      customeTheme2: "theme2",
      customeTheme3: "theme3",
    },
    defaultTheme: "",
  },
};

Parameters

The theme parameter accept an array of Theme object.

Each Theme is an object with the following properties:

  • selector (string - default: 'body'): Target element to which the data Attribute will be applied.
  • dataAttr (string - default: 'data-theme'): The data attribute that will be applied.
  • themeOptions ({ [key: string]: string } - default: {}): The themes you want to use as an Object.
  • defaultTheme (string - default: ''): The name of the theme that should be used on default.

Usage

Click on the new theme popup in the toolbar in storybook to switch between your themes.