[Bug]: addon-themes does not apply to the Autodocs
#30928 opened on Mar 26, 2025
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!
Reproduction link
Reproduction steps
//preview.ts
const preview: Preview = {
parameters: {
// ...
docs: {
toc: true,
},
},
decorators: [
withThemeByClassName<ReactRenderer>({
// ...
}),
],
tags: ["autodocs"],
};
- docs page dark mode click
- 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.