Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook Addon Data Theme Switcher
A Storybook addon to switch the data-theme attribute on the html element
npm install storybook-addon-data-theme-switcher
Last updated 2 months ago
2.2k
Downloads per week
Readme View on GitHub

Storybook Addon Data Theme Switcher

A lightweight Storybook addon to switch data-theme attribute

GitHub Workflow Status npm NPM
Addon preview animation

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 ^7.0.x | ^8.0.x.

Installation

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):

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

Configuration

The addon makes use of storybooks globalTypes 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:

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

export const globalTypes = {
  dataThemes: {
    defaultValue: {
      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: "paintbrush",                   // 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:

export const globalTypes = {
  dataTheme: {
    defaultValue: "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

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI