This repository was archived by the owner on Mar 6, 2024. It is now read-only.
This repository was archived by the owner on Mar 6, 2024. It is now read-only.
[Bug] CSS classes for themes only applied in docs if there exists a story #86
Open
Description
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>