Storybook: Change background color of canvas in single story

[RobbertWolfs]

Is it possible to change the background color of the canvas for a single story??

Because we have like a component with two states... a dark one and a light one..
The dark one is visible

But our light version is not visible on the light grey background...

So it would be nice if we can set the background color of our canvas for a single story.. Something like this:

[RobbertWolfs]

Or another possible solution would be to know in what theme I am using a HTLM class or somthing, because you can create a custom theme but I didn't found if it was possible to change the canvas color.. Only the items around it 👎

If our HTML uses a custom class for a specific theme than I maybe can use this class to overwrite it:
.sb-show-main because this is the class that sets the background...

So if I know what theme it is I maybe can do something like this to overwrite it:

.storybook-dark-theme .sb-show-main {
    background-color: hotpink;
} 

[lukasluecke]

If it's only for a subset of stories the easiest way would probably be to use a custom decorator that wraps it with an element that has the correct background-color.

[winterlamon]

@RobbertWolfs Not sure if you've already figured it out, but sharing just in case. If you're using CSF, you can set the background for a single story using the story object like this:

keypadLight.story = {
  name: 'light',
  parameters: {
    backgrounds: [
      { name: 'dark background', value: '#000', default: true }
    ]
  }
}

By the way, I'm using v5.2.5.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!