Theme

Theme.js

import { addDecorator } from '@storybook/react';
import { themeDefault } from '../themes/default';
import { themeFoo } from '../themes/foo';
import { themeBar } from '../themes/bar';

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Theme selector',
    toolbar: {
      // https://storybook.js.org/docs/react/workflows/faq#what-icons-are-available-for-my-toolbar-or-my-addon
      icon: 'component',
      items: [
        { value: ThemeId.WhiteLabel, title: 'White label', right: 'default' },
        { value: ThemeId.Foo, title: 'Foo' },
        { value: ThemeId.Bar, title: 'Bar' },
      ],
    },
  },
};

addDecorator((Story, { globals }) => {
  const [theme, setTheme] = useState(themeDefault);

  useEffect(() => {
    switch (globals.theme) {
      case ThemeId.Foo:
        setTheme(themeFoo);
        return;
      case ThemeId.Bar:
        setTheme(themeBar);
        return;
      case ThemeId.WhiteLabel:
      default:
        setTheme(themeDefault);
        return;
    }
  }, [globals.theme]);

  return (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  );
});