addon-styling icon indicating copy to clipboard operation
addon-styling copied to clipboard

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

Open markusnissl opened this issue 11 months ago • 3 comments

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>

markusnissl avatar Aug 18 '23 08:08 markusnissl