storybook/docs/essentials/backgrounds.md

title
Backgrounds

The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI:

Configuration

By default the background toolbar presents you with either a light and a dark background.

But you're not restricted to these two, you can configure your own set of colors with the parameters.backgrounds parameter in your .storybook/preview.js:

//.storybook/preview.js

export const parameters = {
backgrounds: {
    default: 'twitter',
    values: [
        { 
            name: 'twitter', 
            value: '#00aced'
        },
        { 
            name: 'facebook', 
            value: '#3b5998' 
        },
      ],
    }

You can also set backgrounds on per-story or per-component basis by using parameter inheritance:

// Button.stories.js

// To apply a set of backgrounds to all stories of Button:
export default {
  title: 'Button',
  parameters: {
    backgrounds: {
      default: 'twitter',
      values: [
        { name: 'twitter', value: '#00aced' },
        { name: 'facebook', value: '#3b5998' },
      ],
    },
  },
};

You can also only override a single key on the background parameter, for instance to set a different default value for a single story:

// Button.stories.js

export const Large = ButtonStory.bind({});
Large.parameters = {
  backgrounds: { default: 'facebook' }
};

If you want to disable backgrounds in a story, you can do so by setting the backgrounds parameter like so:

// Button.stories.js

export const Large = ButtonStory.bind({});
Large.parameters = {
  backgrounds: { disable: true }
};