Toggle Storybook's UI Dark/Light mode

564 views Asked by At

I'm trying to use the storybook-dark-mode plugin with storybook 7, but unfortunately the light/dark theme mode is not applied on the first load. Even if I refresh the page, the light theme is not applied as specified in the darkMode property.

This is the configuration in preview.tsx:

parameters: 
  { darkMode: 
      { 
         light: lightTheme, 
         dark: darkTheme, 
         current: "light", 
         stylePreview: true 
      }, 
    actions: { 
         argTypesRegex: "^on[A-Z].*" }, 
    controls: { 
         matchers: { 
            color: /(background|color)$/i, date: /Date$/, 
         }, 
   }, 
 },

If I click on any of the stories the theme changes, and works as expected.

I'm using storybook v7.0.0-rc.1 and storybook-dark-mode v2.1.1

Is there a way to fix this or implement the desired behavior?

0

There are 0 answers