Storybook: Addon Docs: dark mode toggle

[smollweide]

Is your feature request related to a problem? Please describe.
While implementing a design system which supports dark mode it's not yet possible to toggle into the dark mode in docs. I added a toggle for each single story which works fine in Canvas but don't work in docs because a story is not an iFrame there.

Describe the solution you'd like
A Quite good example on how this could look like is the Zeit design system

[smollweide]

I tried to solve it by creating a custom switch in a portal in .storybook/config.js.

And than override the background :

addDecorator((story, options) => {
  const [dark, setDark] = useState(false);
  return (
    <Fragment>
      <Global
        styles={css`
          .sbdocs-content > div[id^='anchor--'] > div {
            background: ${dark ? '#000' : '#fff'} !important;
          }
        `}
      />
      <SwitchDarkMode checked={dark} onChange={() => setDark(!dark)} />
    </Fragment>
  );
});

With this approach each story has the dark mode but storybook itself stays in the chosen theme. My idea to solve also this part would be like this:

addDecorator((story, options) => {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    addParameters({
      options: {
        theme: dark ? themes.dark : themes.normal,
      },
    });
  }, [dark]);

  return (
    <Fragment>
      <Global
        styles={css`
          .sbdocs-content > div[id^='anchor--'] > div {
            background: ${dark ? '#000' : '#fff'} !important;
          }
        `}
      />
      <SwitchDarkMode checked={dark} onChange={() => setDark(!dark)} />
    </Fragment>
  );
});

But this is not working.

[smollweide]

Some UI inspiration :)

[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!

[connor-baer]

Does this Storybook darkmode addon solve your issue?

You can integrate it with your own theme provider or however else you apply the dark mode.

[angelolucas]

It would be interesting if the Docs toggle to dark mode along with the Storybook.

[jayarjo]

@connor-baer @angelolucas storybook-dark-mode doesn't affect @storybook/addon-docs in any way. The rest toggles dark/light as expected I guess.