Skip to content
This repository has been 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
markusnissl opened this issue Aug 18, 2023 · 3 comments
Labels
bug Something isn't working Needs triage New issue that needs some investigation from the maintainers

Comments

@markusnissl
Copy link

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 markusnissl added the bug Something isn't working label Aug 18, 2023
@ShaunEvening ShaunEvening added the Needs triage New issue that needs some investigation from the maintainers label Aug 25, 2023
@ShaunEvening
Copy link
Contributor

Hey @markusnissl 👋

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

@markusnissl
Copy link
Author

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
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working Needs triage New issue that needs some investigation from the maintainers
Projects
None yet
Development

No branches or pull requests

2 participants