Storybook 6 docs theming #127

stuarthendren · 2020-10-26T17:45:13Z

Can this be made to also configure the storybook docs theme which is supplied separately in v6.0?

hipstersmoothie · 2020-10-26T21:46:16Z

It could. The last time I looked that wasn't configurable. Would happily accept a PR for this :D

stuarthendren · 2020-10-27T16:24:57Z

I had a go at this but I can't see how to make it work.
I can store the relevant docs theme in the globals but I can't see how to provide the theme to the docs. The DocContainer gets the values from the parameters but I don't see any api to set the parameters. I tried using a decorator and setting the parameter value but these seem to only be applied to the stories within the docs - which already worked by the existing mechanism.

jadenlemmon · 2020-11-03T19:38:36Z

I would love to see this be possible somehow as well. I'm running into this issue as well. I may have a look.

stuarthendren · 2020-11-06T11:30:21Z

In preview.js you can supply a custom container and override the styles using the sbdocs css class(es). This could be a route to making this work:

// preview.js
export const parameters = {
  docs: {
    container: DocsContainerTheme,
  },
}

Then through some styling solution manipulate the theme. As a proof of concept, the following worked to switch the background and color, but would be better to use a theme parameter rather than reconstruct the whole css here:

// DocContainerTheme
import React from 'react'
import { DocsContainer } from '@storybook/addon-docs/blocks'
import { useDarkMode } from 'storybook-dark-mode'
import { makeStyles } from '../../src'

const useStyles = makeStyles({
  override: {
    '& .sbdocs': {
      background: ({ dark }) => (dark ? 'black' : 'white'),
      color: ({ dark }) => (dark ? 'white' : 'black'),
    },
  },
})

export const DocsContainerTheme = ({ children, context }) => {
  const dark = useDarkMode()
  const classes = useStyles({ dark })
  return (
    <div className={classes.override}>
      <DocsContainer context={context}>{children}</DocsContainer>
    </div>
  )
}

hipstersmoothie · 2020-11-19T23:16:17Z

I think official support for this is still waiting on storybookjs/storybook#10523

Without a way to dynamically set params for the docs theme, this plugin can't do much. The approach above seems nice though in the interim

soullivaneuh · 2021-03-18T15:25:42Z

Thanks for the sharing @stuarthendren!

I found a better workaround that will fully respect the used theming without hacking the css by overriding the context using spread operators.

First, create a doc container as the above example:

// .storybook/components/DocContainer.tsx
import React from 'react'
import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks'
import { useDarkMode } from 'storybook-dark-mode'
import { themes } from '@storybook/theming';

export const DocsContainer = ({ children, context }) => {
  const dark = useDarkMode()

  return (
    <BaseContainer
      context={{
        ...context,
        parameters: {
          ...context.parameters,
          docs: {
            // This is where the magic happens.
            theme: dark ? themes.dark : themes.light
          },
        },
      }}
    >
      {children}
    </BaseContainer>
  );
}

Then on your preview.js config file:

// .storybook/preview.js
import { DocsContainer } from './components/DocContainer';

export const parameters = {
  docs: {
    container: DocsContainer,
  },
  // Rest of your configuration
};

And voilà! 🎉

UPDATE: Not working since Storybook 6.4. See #127 (comment) or #127 (comment) for 6.4 compatible solution.

hipstersmoothie/storybook-dark-mode#127

sekoyo · 2021-04-30T17:55:47Z

return (
    <BaseContainer
      context={{
        ...context,
        parameters: {
          ...context.parameters,
          docs: {
            // This is where the magic happens.
            theme: dark ? themes.dark : themes.light
          },
        },
      }}
    >
      {children}
    </BaseContainer>
  );

This is life affirming. Surprised it's not in the docs as I don't consider it to be working properly if everything is dark and Docs are still blindingly white 😅

hugoattal · 2021-05-13T17:11:27Z

I'm not using React (but Vue3) and didn't see anything on creating containers in Vue (I'm not even sure it's possible).

So I went with a very simple (but not reactive) solution, adding this in my preview.ts:

export const parameters = {
    /* ... */
    docs: {
        get theme() {
            let isDarkMode = parent.document.body.classList.contains("dark");
            return isDarkMode ? themes.dark : themes.light;
        }
    },
    /* ... */
};

It's not reactive, so you must reload the page. The check is kinda dirty/hacky. But it works for my case, so I thought I might share.

gsingh1370 · 2021-05-24T19:55:53Z

the above solution is working for me for the theme but it stopped showing props table. any ideas?

Error:
Args unsupported. See Args documentation for your framework.
Read the docs

gazpachu · 2021-05-28T01:58:43Z

Yeah, same for me:

@soullivaneuh @gsingh1370 @dominictobias have you managed to make the props work?

gsingh1370 · 2021-05-28T10:08:10Z

@gazpachu use this. Added docs from context

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

export const DocsContainer = ({ children, context }) => {
const dark = useDarkMode()

return (
<BaseContainer
context={{
...context,
parameters: {
...context.parameters,
docs: {
...context.parameters.docs,
// This is where the magic happens.
theme: dark ? themes.dark : themes.light
},
},
}}
>
{children}

);
}

gazpachu · 2021-05-28T11:47:32Z

Thanks, at the end, with lodash/set, the props work fine:

import set from 'lodash/set';
import React, { ReactNode } from 'react';
import { useDarkMode } from 'storybook-dark-mode';

export const DocsContainer = ({
  children,
  context
}: {
  children: ReactNode;
  context: any;
}) => {
  const dark = useDarkMode();
  set(context, 'parameters.docs.theme', dark ? themes.dark : themes.light);
  return <BaseContainer context={context}>{children}</BaseContainer>;
};

soullivaneuh · 2021-10-25T14:15:47Z

@gsingh1370 @gazpachu Not tested because I don't use props for my case, but as an alternative as the lodash example, you may use an additional spread operator:

diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
index a0fd4b7..d1d775d 100644
--- a/.storybook/components/DocContainer.tsx
+++ b/.storybook/components/DocContainer.tsx
@@ -18,6 +18,7 @@ export const DocsContainer: FC<DocsContainerProps> = ({ children, context }) =>
         parameters: {
           ...parameters,
           docs: {
+            ...parameters.docs,
             theme: dark ? themes.dark : themes.light,
           },
         },

This is surely why you don't have any prop, the docs part is completely overridden on my previous sample.

soullivaneuh · 2021-10-25T14:21:19Z

Hmm I just upgraded from 6.4.0-beta.19 and the magic is no longer working, switching back to a "stuck light mode".

Does anyone got the same issue? Do you know if a workaround is possible?

dartess · 2021-11-29T12:35:47Z

Storybook has released 6.4.

I haven't found a new way to set the theme dynamically. My very, very dirty hack with page refresh looks like this:

import React, { useEffect } from 'react';
import { addParameters } from '@storybook/react';
import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
import { themes } from '@storybook/theming';
import { useDarkMode } from 'storybook-dark-mode';

const isInitialDark = JSON.parse(localStorage.getItem('sb-addon-themes-3') ?? '{}')?.current === 'dark';

addParameters({
  docs: {
    theme: isInitialDark ? themes.dark : themes.light,
  },
});

export const DocsContainer: typeof BaseContainer = (props) => {
  const isDark = useDarkMode();

  useEffect(
    () => {
      if (isInitialDark !== isDark) {
        window.location.reload();
      }
    },
    [isDark],
  )

  return <BaseContainer {...props} />;
};

I think this could potentially lead to endless page reloads. Use at your own risk.

aaron-a-anderson · 2021-11-30T21:57:58Z

@dartess , @soullivaneuh after digging through the updates to DocsContainer in 6.4 , was able to get it working this way:

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

Not sure if this is the intended way, but it's working for me 😄

acc-nicholas · 2021-12-06T19:57:48Z

Anyone have a similar issue with the controls addon? I've got everything dark but that portion of the UI.

Kevin-S-Wallace · 2021-12-08T17:52:44Z

I was able to get both the args table to work correctly with subcomponents and the controls section to show up in dark mode with this:

    <BaseContainer
      context={{
        ...context,
        storyById: (id) => {
          const storyContext = context.storyById(id)
          return {
            ...storyContext,
            parameters: {
              ...storyContext?.parameters,
              docs: {
                ...storyContext?.parameters?.docs,
                theme: dark ? darkTheme : themes.light,
              },
            },
          }
        },
      }}
    >

kidsamort · 2022-01-28T08:21:52Z

Мне удалось заставить таблицу аргументов правильно работать с подкомпонентами и разделом управления, чтобы он отображался в темном режиме с помощью этого:
    <BaseContainer
      context={{
        ...context,
        storyById: (id) => {
          const storyContext = context.storyById(id)
          return {
            ...storyContext,
            parameters: {
              ...storyContext?.parameters,
              docs: {
                ...storyContext?.parameters?.docs,
                theme: dark ? darkTheme : themes.light,
              },
            },
          }
        },
      }}
    >

tell me where you used it

fedek6 · 2022-03-17T08:19:33Z

For anyone reading this in 2022. This is full fix description:

Create .storybook/DocsContainer.js

import React from "react";
import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";

export const DocsContainer = ({ children, context }) => {
  const dark = useDarkMode();

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

Edit & tune for your needs: .storybook/preview.js

import React from "react";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";
import { darkTheme } from "@retrolove-games/ui-themes";
import { DocsContainer } from './DocsContainer';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  viewMode: "docs",
  docs: {
    // theme: themes.dark,
    container: DocsContainer,
  },
};

export const decorators = [
  (Story) => (
    <div className={useDarkMode() ? darkTheme.className : "light"}>
      <Story />
    </div>
  ),
];

Also published in my gist.

martijnhalekor · 2022-04-05T11:55:15Z

Same problem here, docs are not updating when changing theme. Would love a similar option for styling docs, just like { stylePreview: true }

For now I'm sticking with the hack by @hugoattal because I'm also using Vue for my UI library. I tried the custom DocsContainer solution, but I can't install React as a devDependency in Storybook 6.4.20, because npm is complaining about dependency conflicts... Let's hope this Storybook issue gets solved.

I'm not using React (but Vue3) and didn't see anything on creating containers in Vue (I'm not even sure it's possible).

So I went with a very simple (but not reactive) solution, adding this in my preview.ts:
export const parameters = {
    /* ... */
    docs: {
        get theme() {
            let isDarkMode = parent.document.body.classList.contains("dark");
            return isDarkMode ? themes.dark : themes.light;
        }
    },
    /* ... */
};

keemor · 2022-06-28T11:49:44Z

Here is how I used @fedek6 DocsContainer with MUI5 theme:

import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
import { getDesignTokens } from "theme/theme";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";
import { DocsContainer } from "./DocsContainer";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.normal },
  },
  docs: {
    container: DocsContainer,
  },
};

function ThemeWrapper(props) {
  const mode = useDarkMode() ? "dark" : "light";
  const theme = createTheme(getDesignTokens(mode));
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline /> {props.children}
    </ThemeProvider>
  );
}

export const decorators = [
  (Story) => (
    <ThemeWrapper>
      <Story />
    </ThemeWrapper>
  ),
];

dartess · 2022-08-15T09:11:46Z

Hey!

It's time to smoothly change the name to "Storybook 7 docs theming"

In storybook@7 (alpha now) BaseContainer has prop theme, and passing theme is now much easier.

But storybook-dark-mode does not set the class for the body in the new docs page. You can do it yourself. But I don't know how to get the global parameters of the storybook correctly (the way I found does not converge on types and I use ts-ignore).

The result of my research is this:

diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
index 2e0d9fb8b..e1be68bf2 100644
--- a/.storybook/components/DocContainer.tsx
+++ b/.storybook/components/DocContainer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -15,24 +15,16 @@ so a workaround is used.
 export const DocsContainer: typeof BaseContainer = ({ children, context }) => {
   const dark = useDarkMode();
 
+  useEffect(() => {
+    // @ts-ignore
+    const { darkClass, lightClass } = context.store.projectAnnotations.parameters.darkMode;
+    const [addClass, removeClass] = dark ? [darkClass, lightClass] : [lightClass, darkClass]
+    document.body.classList.remove(removeClass);
+    document.body.classList.add(addClass);
+  }, [dark])
+
   return (
-    <BaseContainer
-      context={{
-        ...context,
-        storyById: id => {
-          const storyContext = context.storyById(id);
-          return {
-            ...storyContext,
-            parameters: {
-              ...storyContext?.parameters,
-              docs: {
-                theme: dark ? themes.dark : themes.light,
-              },
-            },
-          };
-        },
-      }}
-    >
+    <BaseContainer context={context} theme={dark ? themes.dark : themes.light}>
       {children}
     </BaseContainer>
   );

Tested on version 7.0.0-alpha.19 (everything may change by release)

hipstersmoothie · 2022-12-05T20:29:51Z

I'm not really sure what the solution is here but if there are any that could be landed in the package feel free to make a PR!

sneko · 2023-01-02T21:40:20Z

After upgrading to SB7+Next+Webpack my addons channel is no longer working (so no useDarkMode() possible) and didn't find for now the origin (ref: #205).

So for me, the quick solution is to use as wrapper:

import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
import { themes } from '@storybook/theming';
import React, { useEffect, useState } from 'react';

function isDarkInStorage(): boolean {
  const themeString = localStorage.getItem('sb-addon-themes-3');

  if (themeString) {
    const theme = JSON.parse(themeString);

    return theme['current'] !== 'light';
  }

  return false;
}

export const ThemedDocsContainer = ({ children, context }) => {
  const [isDark, setIsDark] = useState(isDarkInStorage());

  const handler = () => {
    setIsDark(isDarkInStorage());
  };

  useEffect(() => {
    window.addEventListener('storage', handler);

    return function cleanup() {
      window.removeEventListener('storage', handler);
    };
  });

  return (
    <BaseContainer context={context} theme={isDark ? themes.dark : themes.light}>
      {children}
    </BaseContainer>
  );
};

(big sorry for this dirty workaround)

GaroGabriel · 2023-01-10T09:37:27Z

I was able to get both the args table to work correctly with subcomponents and the controls section to show up in dark mode with this:

    <BaseContainer
      context={{
        ...context,
        storyById: (id) => {
          const storyContext = context.storyById(id)
          return {
            ...storyContext,
            parameters: {
              ...storyContext?.parameters,
              docs: {
                ...storyContext?.parameters?.docs,
                theme: dark ? darkTheme : themes.light,
              },
            },
          }
        },
      }}
    >

thank you

mel-miller · 2023-02-23T20:01:53Z

Create .storybook/DocsContainer.js

import React from "react";
import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";

export const DocsContainer = ({ children, context }) => {
  const dark = useDarkMode();

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

Thanks @fedek6 - This solution also worked for me, but now my source code block is only showing raw code — equivalent to setting the docs source parameter as type: 'code' . Do you know if it's possible to edit the custom DocsContainer to allow for type: 'dynamic'?

soullivaneuh · 2023-04-07T14:14:04Z

@dartess I did nearly the similar but without having to hack with the document.body object:

diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
index 84bf99b..abd2e6d 100644
--- a/.storybook/components/DocContainer.tsx
+++ b/.storybook/components/DocContainer.tsx
@@ -13,27 +13,13 @@ import {
 } from '@storybook/theming';
 
 // @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-1070524402
-export const DocsContainer: FC<DocsContainerProps> = ({ children, context }) => {
+export const DocsContainer: FC<DocsContainerProps> = ({ children, ...rest }) => {
   const dark = useDarkMode();
 
   return (
     <BaseContainer
-      context={{
-        ...context,
-        storyById: (id) => {
-          const storyContext = context.storyById(id);
-          return {
-            ...storyContext,
-            parameters: {
-              ...storyContext?.parameters,
-              docs: {
-                ...storyContext?.parameters?.docs,
-                theme: dark ? themes.dark : themes.light,
-              },
-            },
-          };
-        },
-      }}
+      {...rest}
+      theme={dark ? themes.dark : themes.light}
     >
       {children}
     </BaseContainer>

The only thing I have to do is to fill the theme prop with the right one.

Why do you need to play with the DOM body here? 🤔

dartess · 2023-04-07T18:16:06Z

@soullivaneuh it was necessary for storybook-dark-mode@2

Now I have the same version as you.

zhimng · 2023-05-12T03:01:01Z

Hey!

It's time to smoothly change the name to "Storybook 7 docs theming"

In storybook@7 (alpha now) BaseContainer has prop theme, and passing theme is now much easier.

But storybook-dark-mode does not set the class for the body in the new docs page. You can do it yourself. But I don't know how to get the global parameters of the storybook correctly (the way I found does not converge on types and I use ts-ignore).

The result of my research is this:

diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
index 2e0d9fb8b..e1be68bf2 100644
--- a/.storybook/components/DocContainer.tsx
+++ b/.storybook/components/DocContainer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -15,24 +15,16 @@ so a workaround is used.
 export const DocsContainer: typeof BaseContainer = ({ children, context }) => {
   const dark = useDarkMode();
 
+  useEffect(() => {
+    // @ts-ignore
+    const { darkClass, lightClass } = context.store.projectAnnotations.parameters.darkMode;
+    const [addClass, removeClass] = dark ? [darkClass, lightClass] : [lightClass, darkClass]
+    document.body.classList.remove(removeClass);
+    document.body.classList.add(addClass);
+  }, [dark])
+
   return (
-    <BaseContainer
-      context={{
-        ...context,
-        storyById: id => {
-          const storyContext = context.storyById(id);
-          return {
-            ...storyContext,
-            parameters: {
-              ...storyContext?.parameters,
-              docs: {
-                theme: dark ? themes.dark : themes.light,
-              },
-            },
-          };
-        },
-      }}
-    >
+    <BaseContainer context={context} theme={dark ? themes.dark : themes.light}>
       {children}
     </BaseContainer>
   );

Tested on version 7.0.0-alpha.19 (everything may change by release)

This is useful for me. Thanks

lcallanan-instabase · 2023-05-18T14:34:09Z

@soullivaneuh's solution works well except for a few style regressions. Swapping out theme (esp. light -> dark) changes the css class order which mangles styles:

Before theme swap	After theme swap (link position changed & markdown heading is indented)

Has anyone found a workaround that doesn't require reloading the docs iframe?

dondevi · 2023-06-03T14:08:58Z

@soullivaneuh's solution works well except for a few style regressions. Swapping out theme (esp. light -> dark) changes the css class order which mangles styles:

Before theme swap After theme swap (link position changed & markdown heading is indented)

Has anyone found a workaround that doesn't require reloading the docs iframe?

😂 Still dirty:

<!-- preview-head.html -->
<style>
  /* Fix dynamic dark mode */
  #storybook-docs h1>a:first-child,
  #storybook-docs h2>a:first-child,
  #storybook-docs h3>a:first-child,
  #storybook-docs h4>a:first-child,
  #storybook-docs h5>a:first-child,
  #storybook-docs h6>a:first-child {
    float: left;
    line-height: inherit;
    padding-right: 10px;
    margin-left: -24px;
    color: inherit;
  }
</style>

WilliamABradley · 2024-03-02T05:35:33Z

Finally got this working for me on react-vite 😅

Not sure if it is a vite specific issue, react 18 issue, or something, but overriding the context property seems to cause an error relating to useEffect being null weirdly.

This was my least painful complete solution for theme to be controlled by the global parameters:

import React from "react";
import type { Preview } from "@storybook/react";
import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
import { themes } from "@storybook/theming";

const preview: Preview = {
  globalTypes: {
    theme: {
      description: "Global theme for components",
      defaultValue: "Dark",
      toolbar: {
        // The label to show for this toolbar item
        title: "Theme",
        icon: "circlehollow",
        // Array of plain string values or MenuItem shape (see below)
        items: ["Light", "Dark"],
        // Change title based on selected value
        dynamicTitle: true,
      },
    },
  },
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    docs: {
      container: (props: DocsContainerProps) => {
        const { globals } = (props.context as any).store.globals;
        return (
          <DocsContainer
            {...props}
            context={props.context}
            theme={
              // Complains about missing properties, but it works
              (globals.theme === "Dark" ? themes.dark : themes.light) as any
            }
          />
        );
      },
    },
  },
};

export default preview;

k-utsumi · 2024-05-31T13:31:19Z

My project uses Storybook@7.6.17 with react-vite.
This worked fine for switching to dark mode.

preview.tsx:

import { DocsContainer, type DocsContainerProps } from '@storybook/blocks'
import type { Preview } from '@storybook/react'
import { themes } from '@storybook/theming'
import React, { type FC } from 'react'
import { useDarkMode } from 'storybook-dark-mode'

const { dark, light } = themes
const container: FC<DocsContainerProps> = ({ ...rest }) => (
  <DocsContainer {...rest} theme={useDarkMode() ? dark : light} />
)
export const parameters = {
  darkMode: { stylePreview: true },
  docs: { container },
}
const preview: Preview = { parameters }
export default preview

paul-vd · 2024-07-28T00:22:06Z

On storybook v8 I get Storybook preview hooks can only be called inside decorators and story functions. any ideas?

taikongfeizhu · 2024-08-13T08:57:21Z

My project uses Storybook@^7.6.7 with webpack, it worked fine!

doc-container.tsx：

import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";

export const DocsContainer = ({ children, context, ...rest }) => {
  const { dark, light } = themes

  return (
    <BaseContainer
      context={context}
      {...rest}
      theme={useDarkMode() ? dark : light}
    >
      {children}
    </BaseContainer>
  );
};

prevew.tsx:

const parameters: Preview['parameters'] = {
 ...
  docs: {
    container: ({children, context}) => {
      return (
        <DocsContainer
          context={context}
        >
          {children}
        </DocsContainer>
      )
    },
  },
}

stuarthendren added a commit to commitd/components that referenced this issue Mar 18, 2021

Fixes the storybook docs styling

2f00006

hipstersmoothie/storybook-dark-mode#127

stuarthendren mentioned this issue Mar 18, 2021

Fixes the storybook docs styling commitd/components#77

Merged

dartess mentioned this issue Nov 29, 2021

Addon-Docs: Changing the theme via api doesn't persist in Docs storybookjs/storybook#10523

Open

keemor mentioned this issue Jun 28, 2022

Addon Docs: dark mode toggle storybookjs/storybook#9301

Closed

luansievers mentioned this issue Sep 5, 2022

[FAD-57] - Add typography weavik/free-artist-dao#8

Merged

2 tasks

hipstersmoothie added the help wanted Extra attention is needed label Dec 5, 2022

TristanBrotherton mentioned this issue Jan 3, 2023

Incompatible with Storybook 7 Beta renatomoor/storybook-tailwind-dark-mode#13

Closed

mattcorner mentioned this issue Jul 17, 2023

Upgrade to Storybook 7 IPG-Automotive-UK/react-ui#660

Merged

4 tasks

naporin0624 mentioned this issue Apr 4, 2024

chore(storybook): apply docs theming pixiv/charcoal#509

Merged

3 tasks

Storybook 6 docs theming #127

Storybook 6 docs theming #127

Comments

stuarthendren commented Oct 26, 2020

hipstersmoothie commented Oct 26, 2020

stuarthendren commented Oct 27, 2020

jadenlemmon commented Nov 3, 2020

stuarthendren commented Nov 6, 2020

hipstersmoothie commented Nov 19, 2020

soullivaneuh commented Mar 18, 2021 • edited Loading

sekoyo commented Apr 30, 2021

hugoattal commented May 13, 2021 • edited Loading

gsingh1370 commented May 24, 2021 • edited Loading

gazpachu commented May 28, 2021 • edited Loading

gsingh1370 commented May 28, 2021

gazpachu commented May 28, 2021

soullivaneuh commented Oct 25, 2021

soullivaneuh commented Oct 25, 2021

dartess commented Nov 29, 2021 • edited Loading

aaron-a-anderson commented Nov 30, 2021

acc-nicholas commented Dec 6, 2021

Kevin-S-Wallace commented Dec 8, 2021

kidsamort commented Jan 28, 2022

fedek6 commented Mar 17, 2022

martijnhalekor commented Apr 5, 2022 • edited Loading

keemor commented Jun 28, 2022

dartess commented Aug 15, 2022

hipstersmoothie commented Dec 5, 2022

sneko commented Jan 2, 2023 • edited Loading

GaroGabriel commented Jan 10, 2023

mel-miller commented Feb 23, 2023

soullivaneuh commented Apr 7, 2023

dartess commented Apr 7, 2023

zhimng commented May 12, 2023

lcallanan-instabase commented May 18, 2023

dondevi commented Jun 3, 2023

WilliamABradley commented Mar 2, 2024 • edited Loading

k-utsumi commented May 31, 2024

paul-vd commented Jul 28, 2024

taikongfeizhu commented Aug 13, 2024 • edited Loading

soullivaneuh commented Mar 18, 2021 •

edited

Loading

hugoattal commented May 13, 2021 •

edited

Loading

gsingh1370 commented May 24, 2021 •

edited

Loading

gazpachu commented May 28, 2021 •

edited

Loading

dartess commented Nov 29, 2021 •

edited

Loading

martijnhalekor commented Apr 5, 2022 •

edited

Loading

sneko commented Jan 2, 2023 •

edited

Loading

WilliamABradley commented Mar 2, 2024 •

edited

Loading

taikongfeizhu commented Aug 13, 2024 •

edited

Loading