[Bug] CSS classes for themes only applied in docs if there exists a story

[markusnissl]

I use theme switching by class name in Angular:

themes: {
            "Theme1 (light)": "theme1 light",
            "Theme1 (dark)": "theme1 dark",
            "Theme2": "theme2",
        },
defaultTheme: "Theme2",
parentSelector: "body",

When using a custom doc that is not linked to a story element and just documentation, the css classes are not inserted in the body. I would need the css styles for example in case I want to render a color palette with variables instead of hard-coding the values.

Workaround:
I created an empty component and render it in the docs. Then it works again:

import {Meta, ColorPalette, ColorItem, Story} from '@storybook/blocks';
import * as WorkaroundStories from "./theme.component.stories";


<Meta title="Colors"/>

<div style={{display: "none"}}>
Workaround: The theme variable is not injected when no story is used on the page, so we inject some story here
<Story of={WorkaroundStories.Empty} meta={WorkaroundStories}></Story>
</div>

# Colors

<ColorPalette>
    <ColorItem
        title="Primary color"
        subtitle=""
        colors={{
            "Primary": 'var(--color-primary)',
        }}
    />
</ColorPalette>

[ShaunEvening]

Hey @markusnissl 👋

I'll need to dig a little deeper into this. Can you share a reproduction that I can use to test?

[markusnissl]

Hey @integrayshaun

sorry that my response took so long.

I created now a demo repository. You find the issue in the colors and colors-fixed doc part when switching themes.
https://stackblitz.com/~/github.com/markusnissl/storybook-demo

[ShaunEvening]

Hey @markusnissl 👋

Now worries at all. Apologies for taking a few weeks to get back to you. There's been a few developments since you created this issue.

The biggest of which is, this package is deprecated. For theme switching you should use @storybook/addon-themes however right now it will likely have the same issue.

The switcher relies on the code in the decorator to run when the theme is changed. Without a story in your MDX, there is no decorator on the bag either to respond to this. Support for switching themes for your components in docs is quite a finicky and I'd like to tackle this in Storybook 8 As we tackle some other theme changes in the UI to account for this