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: