@storybook/addon-themes
Storybook Themes addon: Switch between themes from the toolbar
Last updated 8 months ago by storybook-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @storybook/addon-themes 
SYNC missed versions from official npm registry.

@storybook/addon-themes

Storybook Addon Themes can be used to switch between multiple themes for components inside the preview in Storybook.

React Storybook Screenshot

Usage

Requires Storybook 7.0 or later. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-themes

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-themes'],
};

???? Tool specific configuration

For tool-specific setup, check out the recipes below

Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the "Writing a custom decorator" section of the api reference.

❗️ Overriding theme

If you want to override your theme for a particular component or story, you can use the globals.theme parameter.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  // meta level override
  globals: { theme: 'dark' },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const PrimaryDark = {
  args: {
    primary: true,
    label: 'Button',
  },
  // story level override
  globals: { theme: 'dark' },
};

Learn more about Storybook at storybook.js.org.

Current Tags

  • 0.0.0-pr-31551-sha-c166dc44                                ...           canary (7 months ago)
  • 9.1.3                                ...           latest (8 months ago)
  • 10.0.0-beta.0                                ...           next (8 months ago)
  • 8.2.10                                ...           tag-for-publishing-older-relea (a year ago)

1279 Versions

Downloads
Today 0
This Week 0
This Month 986
Last Day 0
Last Week 986
Last Month 0
Dependencies (1)
Dev Dependencies (4)

Copyright 2013 - present © cnpmjs.org | Home |