Nauseating Pumpkin Mush

    storybook-addon-background-themes
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    Storybook Addon Background Themes

    Storybook Addon Background Themes can be used to change themes inside the preview in Storybook. The themes are simple sets of CSS custom properties.

    Installation

    npm i -D storybook-addon-background-themes

    Configuration

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

    module.exports = {
      addons: ['storybook-addon-background-themes'],
    };

    Usage

    Add a backgroundThemes property to the configuration aparameters of preview.js:

    export const parameters = {
      backgroundThemes: {
        base: {
          // CSS custom properties that will be applied for each theme
          "--some-base-custom-property": "blue",
        },
        themes: [
          {
            name: "Light",
            previewValue: "#000",
            properties: {
              "--some-custom-property-for-light-mode": "#fff"
            },
          },
          {
            name: "Dark",
            previewValue: "#000",
            properties: {
              "--some-custom-property-for-dark-mode": "#000"
            },
          },
        ],
      },
    };

    Install

    npm i storybook-addon-background-themes

    DownloadsWeekly Downloads

    5

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    29

    Last publish

    Collaborators

    • blittle