Nihilistic Party Mantra

    @pluralsight/ps-design-system-storybook-addon-theme
    TypeScript icon, indicating that this package has built-in type declarations

    9.1.25 • Public • Published

    Storybook Addon Theme

    Storybook Addon Theme can be used to change the background color and default theme inside the preview in Storybook.

    Storybook screenshot

    Installation

    Theme is part of @pluralsight/ps-design-system-storybook-preset or you can install it individually with:

    npm i -D @pluralsight/ps-design-system-storybook-addon-theme

    Configuration

    Add the following to .storybook/main.js:

    module.exports = {
      addons: ['@pluralsight/ps-design-system-storybook-addon-theme']
    }

    Usage

    Stories will default to the dark theme.

    Override the default for a single story, all of a component's stories, or for all stories with the theme.name parameter (see more instructions here):

    theme: { name: 'light' }

    Disable the theme with the theme.disable parameter:

    theme: { disable: true }

    If you're using Storybook's addon-essentials you'll probably want to disable the Background addon since it also sets the background. Add the following to .storybook/preview.js:

    parameters: {
      backgrounds: { disable: true }
    }

    Install

    npm i @pluralsight/ps-design-system-storybook-addon-theme

    DownloadsWeekly Downloads

    437

    Version

    9.1.25

    License

    Apache-2.0

    Unpacked Size

    84.8 kB

    Total Files

    39

    Last publish

    Collaborators

    • jaketrent
    • danethurber
    • pluralsight