[Vuejs]-Change Storybook v7 Documentation Theme at runtime

by

0👍

There shouldn’t be a need to do this with timeouts.

Here’s an example using React & MUI Themes, but I expect you should be able to use something quite similar to this. The key being that you implement a decorator for rendering your stories. Switching the theme happens through the globalType theme that can then be chosen in the story toolbar.

import { createTheme, CssBaseline, styled, ThemeProvider } from '@mui/material';
import { themes } from './themes';
import { useEffect } from 'react';

const ThemingDecorator = (Story, context) => {
  const {theme: themeName} = context.globals;

  const selectedTheme = themes.find(theme => theme.themeName === themeName);
  const createdTheme = selectedTheme ? createTheme(selectedTheme) : createTheme();

  useEffect(() => {
    document.body.style.background = selectedTheme.palette.background.default;
  }, [themeName]);

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


const preview = {
  parameters: {
    actions: {argTypesRegex: '^on[A-Z].*'},
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  globalTypes: {
    theme: {
      title: 'Theme',
      description: 'MUI Theme',
      defaultValue: themes[0].themeName,
      toolbar: {
        icon: 'paintbrush',
        items: themes.map(theme => ({value: theme.themeName, title: theme.themeName})),
        dynamicTitle: true,
      },
    },
  },
  decorators: [
    ThemingDecorator
  ]
};

export default preview;

Hope this helps 🙂

Leave a comment