storybook-theme-css-custom-properties v0.0.1

Storybook Theme CSS Custom Properties

This addon can be used to set a data attribute in Storybook's iframe html element triggering a toggle between dark and light mode.

Example styles:

:root {
  --white: #fff;
  --black: #000;
}

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

Installation

npm i -D storybook-theme-css-custom-properties

Add the addon to .storybook/main.js:

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

Add parameters options to .storybook/preview.js:

export const parameters = {
  theme: {
    selector: ".your-selector",
    dataAttr: "data-your-attribute",
  },
};

Usage

Click on the new theme toggle in the toolbar to toggle between dark and light mode.