Storybook 7 - docs-root does not exists to add dark class

[adityapant1286]

Hi @renatomoor,

Thank you for your efforts working on this package.

There is an error observed for Storybook 7. The element to add dark class is null as there is no such element exists with the id docs-root. This errors out when adding dark class.
Changing the background of body element is working, but this is a hack. Please advise.

• Storybook 7
• React 18
• storybook-tailwind-dark-mode 1.0.16

storybook-tailwind-dark-mode/src/withGlobals.js

Line 9 in 2860d30

const selector = isInDocs ? '#docs-root' : 'html';

Receiving this error for Docs:

[JReinhold]

@renatomoor the element that had the id docs-root in 6.5, now has the id storybook-docs in 7.0. You could try changing the implementation to that and see if it fixes it. However I would expect it to be a breaking change to this addon, since it would make it only compatible with 7.0, but that's not for me to decide.

The change can be seen here storybookjs/storybook#10638

[renatomoor]

@JReinhold @adityapant1286.

@freddyamarante has made the fix and has also released the new version

[adityapant1286]

Hi @freddyamarante , thank you for fixing it. Not sure it is an issue with storybook 7 or this case is failing.

The controls are showing correct colors for dark and light mode. However, the background color remains white.

Button in light-mode

Button in dark-mode

Perhaps need to update background color of the body element having .sb-show-main class.

preview.ts file for a reference

const preview: Preview = {
  globalTypes: {
    darkMode: {
      defaultValue: true, // Enable dark mode by default on all stories
    }
  },
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    darkMode: {
      current: 'light',
      dark: { ...themes.dark, appBg: '#171717' },
      light: { ...themes.normal, appBg: '#ffffff' }
    },
  },
};

[freddyamarante]

I'll take a look at it! I also think would be convenient to add a way to input what background color you want, I'll pr soon

[adityapant1286]

Hi @renatomoor and @freddyamarante, this recent request is closed, would you advise moving to a new issue or mark this to 'open'.