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]

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]

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.

[keemor]

So there's no way to integrate toggle with Docs https://stackoverflow.com/a/67365473/343900 ?

Here is an example https://storybook.js.org/addons/storybook-dark-mode

But it doesn't work:

import React from 'react';
import addons from '@storybook/addons';
import { DocsContainer } from '@storybook/addon-docs';
import { themes } from '@storybook/theming';

import {
  DARK_MODE_EVENT_NAME,
  UPDATE_DARK_MODE_EVENT_NAME
} from 'storybook-dark-mode';

const channel = addons.getChannel();

export const parameters = {
  darkMode: {
    current: 'light',
    dark: { ...themes.dark },
    light: { ...themes.light }
  },
  docs: {
    container: props => {
      const [isDark, setDark] = React.useState();

      const onChangeHandler = () => {
        channel.emit(UPDATE_DARK_MODE_EVENT_NAME);
      };

      React.useEffect(() => {
        channel.on(DARK_MODE_EVENT_NAME, setDark);
        return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
      }, [channel, setDark]);

      return (
        <div>
          <input type="checkbox" onChange={onChangeHandler} />
          <DocsContainer {...props} />
        </div>
      );
    }
  }
};

[keemor]

I found solution here hipstersmoothie/storybook-dark-mode#127 (comment)

[tillsanders]

I found a workaround for Vue.

First, add a theme decorator to your preview.ts. It will read the selected theme / mode from the toolbar and add classes for the dark and light mode. Make sure to adjust them to your needs:

// preview.ts

// Theme Decorator
const withThemeProvider = (Story, context) => {
  const theme = context.globals.theme;
  return {
    components: { story: Story },
    template: `
      <div
        class="${theme === 'dark' ? 'my-darkmode-class' : 'my-lightmode-class'}"
        style="padding: 2rem;"
      >
        <story />
      </div>
    `,
  }
};

Now, again, in the preview.ts, add the global theme type we used above to the toolbar. We will also add the decorator and disable both the background and the padding.

// preview.ts
const preview: Preview = {
  // [...]
  globalTypes: {
    theme: {
      description: 'Global color scheme for components.',
      defaultValue: 'light',
      toolbar: {
        title: 'Color Scheme',
        icon: 'mirror',
        items: [
          { value: 'light', title: 'Light Mode' },
          { value: 'dark', title: 'Dark Mode' },
        ],
        dynamicTitle: true,
      },
    },
  },
  decorators: [withThemeProvider],
  parameters: { 
    backgrounds: { disable: true }, // disable background provided by the background addon
    layout: 'fullscreen', // remove padding
  },
};