Framework:

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 a light and dark background.

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

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

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

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