.storybook/overrides/docs-container.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
import { useDarkMode } from 'storybook-dark-mode';
import dark from '../themes/dark';
import light from '../themes/light';

/**
 * Custom Docs Container to support dark theme.
 *
 * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-1070524402
 */
export const DocsContainer = ({ children, context }) => {
  const isDark = useDarkMode();

  return (
    <BaseContainer
      context={{
        ...context,
        storyById: (id) => {
          const storyContext = context.storyById(id);
          return {
            ...storyContext,
            parameters: {
              ...storyContext?.parameters,
              docs: {
                ...storyContext?.parameters?.docs,
                theme: isDark ? dark : light,
              },
            },
          };
        },
      }}
    >
      {children}
    </BaseContainer>
  );
};