addon-backgrounds does nothing

[ghost]

Describe the bug
I've added the @storybook/addon-backgrounds, I see the icon, I click on it and change to the dark background, nothing happens. I'm also not seeing it work in your online demos.

To Reproduce
Steps to reproduce the behavior:

1. Go to your own demo: https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-backgrounds--story-1
2. Try switching the background color
3. Nothing happens for me in Chrome, Firefox, and Safari (all on Mac)

Expected behavior
Background switches color

Screenshots
I have zero extensions in my Safari so that's why I tested it there

Code snippets
no code snippet, just added the package, putting it into my addons:[] in my main.js, and that's all.

System:
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 79.0
    Safari: 13.1.2

I am on 6.0.13 for all my Storybook packages

    "@storybook/addon-a11y": "^6.0.13",
    "@storybook/addon-actions": "^6.0.13",
    "@storybook/addon-backgrounds": "^6.0.13",
    "@storybook/addon-controls": "^6.0.13",
    "@storybook/addon-docs": "^6.0.13",
    "@storybook/addon-links": "^6.0.13",
    "@storybook/addon-viewport": "^6.0.13",
    "@storybook/addons": "^6.0.13",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.13",
    "@storybook/theming": "^6.0.13",

[shilman]

@yannbf can you take a look?

[Glinkis]

I had this happen as well, and it turned out my CSS-reset was overriding the background of body. So you might want to check for that first.

[ghost]

@Glinkis confirmed, that's the issue!

just tested it out on https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-backgrounds--story-1

In that demo link, what's adding this background color directly to the body?

[yannbf]

Hey @francisco-gdd, I'm glad you figured the issue out!

In Storybook's react kitchen sink, a custom feature was implemented as an example of creating a custom toolbar. It was to be able to have a side-by-side comparison of a component in light/dark mode:

It's quite unfortunate, but the way it was implemented ended up breaking addon-backgrounds. Addon backgrounds sets the background color of the iframe element that wraps a story, but that custom implementation adds the background to the body, and as it has more specificity, it overrides the behavior of addon-backgrounds. However, addon-backgrounds itself is not broken. As you can see in the vue kitchen sink example for instance, it works fine.

So indeed, all that addon-backgrounds does is define the background color in the iframe. If there's something inside of the iframe that does something regarding that property and with more specificity, it will render the addon unusable.

[ghost]

In my specific case it was bootstrap that was causing and I just had to reset it d'oh!

Thanks for taking the time to look into it! sorry to bother!

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.