How to change the Documentation them dynamically?

[T0miii]

Is there an official way to change the Documentation Theme Dynamically at runtime (without refreshing)? I have a setTimeout in my preview.ts and my manager.ts one is changing the html attribute in the preview => class='dark' the other is done like this:

  addons.setConfig({
    theme: themes.dark,
  });

But i cant seem to make the documentation to change this is what i am trying currently:

import type { Preview } from '@storybook/vue3';
import { themes } from '@storybook/theming';
import { FORCE_RE_RENDER } from '@storybook/core-events';


import { addons } from '@storybook/preview-api';

import '../src/theme/index.scss'
import '../src/theme/themes.scss'

function addClass(theme :string = 'light') {
  var element = document.getElementsByTagName("html");
  element[0].classList.add(theme);
}

addClass()
const preview: Preview = {
  parameters: {
    layout: 'centered',

    actions: { argTypesRegex: '^on[A-Z].*' },
    docs: {
      theme:themes.light // The replacement theme to use

    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};


setTimeout(() => {
  addClass('dark')
  preview.parameters.docs.theme = themes.dark
  addons.getChannel().emit(FORCE_RE_RENDER);
}, 4000)



export default preview;

[agex-n7]

This worked for me, using the storybook-dark-mode addon:

// DocsContainer.tsx

import { DocsContainer as BaseContainer, DocsContainerProps } from '@storybook/blocks';
import { addons } from '@storybook/preview-api';
import { themes } from '@storybook/theming';
import React, { FC, PropsWithChildren, useEffect, useState } from 'react';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';

const channel = addons.getChannel();

export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({ children, context }) => {
  const [isDark, setDark] = useState(false);

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

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

// preview.tsx

const preview: Preview = {
  ...
  parameters: {
    ...
    docs: {
      container: DocsContainer,
    }
  }
};

[ConorKelleher]

This saved me. Couldn't find anything for hours other than people circumventing this built-in theming approach with custom theme providers from 3rd party UI libraries.

For reference to anyone with my case, I didn't want any interaction with the channels and events - I just wanted a way to switch themes at runtime (I embed my storybook build in my website so I wanted the theme to be controllable through external data (e.g. url params).

Here's my more minimal POC, using a setInterval to prove how you can stick any JS in to switch the theme at runtime, without needing to add other libraries or touch events:

import {
  DocsContainer as BaseContainer,
  DocsContainerProps,
} from "@storybook/blocks"
import React, { FC, PropsWithChildren, useEffect, useState } from "react"
import { DARK_THEME, LIGHT_THEME } from "./Themes"

export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
  children,
  context,
}) => {
  const [isDark, setDark] = useState(false)

  useEffect(() => {
    const interval = setInterval(() => setDark((wasDark) => !wasDark), 2000)

    return () => {
      clearInterval(interval)
    }
  }, [])

  return (
    <BaseContainer theme={isDark ? DARK_THEME : LIGHT_THEME} context={context}>
      {children}
    </BaseContainer>
  )
}

[ivan-kabakohlo]

@T0miii Hi! My working solution:

.storybook/main.js

module.exports = {
// ...
  "addons": [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    '@storybook/addon-interactions',
    '@storybook/preset-scss',
    '@storybook/addon-mdx-gfm',
    '@storybook/addon-styling',
    '@storybook/addon-themes',
    {
      name: '@storybook/addon-styling',
      options: {},
    },
    '@storybook/addon-webpack5-compiler-babel',
    '@chromatic-com/storybook',
  ],
// ...
}

.storybook/manager.js

import { addons } from '@storybook/manager-api'
import { themes } from '@storybook/theming'

addons.setConfig({
  theme: themes.dark,
})

.storybook/preview.js

import React from "react";

import { withThemeFromJSXProvider } from "@storybook/addon-themes";
import { themes } from "@storybook/theming";
import { DocsContainer } from "@storybook/addon-docs/blocks";

import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

import { myMuiTheme } from "../src/theme/theme";

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

function DocsContainerWithTheme({ children, ...props }) {
  const currentThemeType =
    props?.context?.store?.userGlobals?.globals?.theme || "light";
  const theme = currentThemeType === "light" ? themes.light : themes.dark;

  return (
    <DocsContainer {...props} theme={theme}>
      {children}
    </DocsContainer>
  );
}

export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles: CssBaseline,
    Provider: MuiThemeProvider,
    themes: {
      light: themes.light,
      dark: themes.dark,
    },
    defaultTheme: "light",
  }),
];

function MuiThemeProvider({ children }) {
  return <ThemeProvider theme={myMuiTheme}>{children}</ThemeProvider>;
}

export const tags = ["autodocs"];