New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,101
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Custom Theme Switcher
Theme switcher tool addon that changes the themes using CSS custom properties
npm install storybook-custom-theme-switcher
Last updated 3 months ago
37
Downloads per week
Readme 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: {
      customeTheme1: "theme1",
      customeTheme2: "theme2",
      customeTheme3: "theme3",
    },
    defaultTheme: "theme1",
  },
};

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.

Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI