storybookjs/storybook

[Bug]: addon-themes does not apply to the Autodocs

Open

#30928 opened on Mar 26, 2025

View on GitHub
 (6 comments) (12 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: themesbughelp wantedsev:S3

Description

Describe the bug

Describe the bug

Hello I'm currently using Storybook with the addon-themes addon. The dark theme works perfectly inside component, but I noticed that the Docs tab does not reflect the dark theme styling.

The issue seems to be that the generated Docs DOM is being wrapped in an additional container with a background color, which prevents the theme styles from being applied properly.

You can see this more clearly in the attached image (see marker 1)

What I expected

I expected the dark theme to be applied consistently across both the component canvas and the Docs tab.

What actually happened

The dark theme is applied correctly in the canvas view, but not in the Docs tab. It appears that the DOM inside Docs has extra wrappers and inline styles that override the background and theme styles.

Thank you!

Image

Reproduction link

https://63-dot-0-53-7-beta--675790d317ba346348aa3490.chromatic.com/?path=/docs/components-button--docs&globals=theme:dark

Reproduction steps

//preview.ts
const preview: Preview = {
  parameters: {
     // ...
    docs: {
      toc: true,
    },
  },
  decorators: [
    withThemeByClassName<ReactRenderer>({
        // ...
    }),
  ],
  tags: ["autodocs"],
};
  1. docs page dark mode click
  2. storybook-docs children dom click

System

npm packages
storybook version: 8.5.2
@storybook/addon-themes version: 8.5.2
@pandacss/dev version: 0.51.1

Additional context

I'm not sure if I'm using it incorrectly or if it's a bug with the Docs addon. I’d appreciate it if you could let me know if there's a correct way to make the dark theme apply to the Docs as well.

Contributor guide