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 Themes Addon
A storybook addon to switch between different themes for your preview
npm install @kitsu-io-forks/storybook-addon-themes
Last updated 9 months ago
179
Downloads per week
Readme View on GitHub

Storybook Addon Themes

Greatly inspired by @storybook/addon-backgrounds.

This Storybook Theme Decorator can be used to add a custom HTML class or classes to the preview in Storybook.

Demo

Compatibility

This version is compatible with storybook version 7.0.x.

Installation

npm i -D @kitsu-io-forks/storybook-addon-themes

Getting started

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

module.exports = {
  addons: [
    // Maybe other addons here...
    'storybook-addon-themes',
    // Or here...
  ],
};

See the storybook documentation for more informations.

Configuration

The themes parameter accepts the following Config object:

  • default (string - optional): Value of theme selected by default
  • clearable (boolean - optional - default is true): Can the user clear the selected theme ?
  • options (Theme[] - required): The list of themes
  • target (string - optional): Target element selected with document.querySelector() to which classes are applied. Defaults to body.
  • property (string - optional): The HTML attribute to which the theme value is assigned. Defaults to class.

Each Theme under options is an object with the following properties:

  • name (string): Display name for the theme
  • value (string): Property value for the theme
  • color (string): The color of the badge in the theme selector
  • default [deprecated] (boolean - optional): Is the theme selected by default?

You define this in your storybook preview.js file:

export const parameters = {
  themes: {
    default: 'theme-twt',
    list: [
      { name: 'twitter', value: 'theme-twt', color: '#00aced' },
      { name: 'facebook', value: 'theme-fb', color: '#3b5998' },
    ],
  },
};

See the storybook documentation for more information.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI