This Addon lets you switch the data-theme attribute in your Storybook, by
selecting a defined theme from a toolbar dropdown and adding the selected theme
to the data-theme attribute of storybooks iframe html element.

This comes in handy if you want to test your components with different themes.

Compatibility

This addon is compatible with storybook version ^10.x.x.

- For storybook version >=8.3.x <10.x.x use
storybook-addon-data-theme-switcher@2.0.2
- For storybook version <8.3.x use
storybook-addon-data-theme-switcher@0.4.2

Installation

``shell
npm install storybook-addon-data-theme-switcher --save-dev
`

Getting Started

Then activate the addon by adding it to the storybook main.js file
(located in the Storybook config directory):

`javascript
module.exports = {
addons: [
// other addons here
"storybook-addon-data-theme-switcher",
],
};
`

Configuration

The addon makes use of storybooks initialGlobals to define and load the
themes.

To define a selection of themes alongside other configuration options, you can
add the following to your global storybook configuration file preview.js:

`typescript
import type { ThemeConfig } from "storybook-addon-data-theme-switcher";

export const initialGlobals = {
dataThemes: {
list: [
{ name: "Rainforest", dataTheme: "rainforest", color: "#00755e" },
{ name: "Candy", dataTheme: "candy", color: "#ffb7d5" },
{ name: "Rose", dataTheme: "rose", color: "#ff007f" },
],
dataAttribute: "data-theme", // optional (default: "data-theme")
clearable: true, // optional (default: true)
toolbar: {
title: "Change data-theme attribute", // optional
icon: "PaintBrushIcon", // optional
},
} satisfies ThemeConfig,
};
`

To set a default data-theme value, which will be used in the initial load of
the storybook, you can add the following to your preview.js file:

`javascript
export const initialGlobals = {
dataTheme: "rainforest",
dataThemes: {
...
},
};
`

> Note: Make sure to match the dataTheme default value with one of the
> defined themes in the list` array.

License

This project is licensed under the MIT License