Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make selected theme available on root/different element #509

Open
sarasilvaworkera opened this issue Nov 7, 2024 · 2 comments
Open

Make selected theme available on root/different element #509

sarasilvaworkera opened this issue Nov 7, 2024 · 2 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@sarasilvaworkera
Copy link

Currently, we want to display components in different themes in Storybook, but there is a mismatch between Storybook theming strategy and our current one: in our application we basically inject the selected theme in the root element and use the css selector :root to make the necessary UI changes. On Storybook this theme class is applied only to the wrapper div of the component which makes it impossible to keep our system strategy consistent with Storybook strategy.

image
Example

My suggestion: make it possible to customize where the theme class will be applied in Storybook, particularly make it available on body or on upper level on variations pages.
@sarasilvaworkera
Copy link
Author

sarasilvaworkera commented Nov 7, 2024 •
edited
Loading

Just a note: I think theme injection in the root element is a best-practice and a standard in theming management (correct me if I'm wrong 😅 ) so I suggest that we add this to the root element <html>. I have downloaded the repo and I was able to make this work - the only thing that required functional change is that switching themes requires a full reload, but I don't foresee that as an issue in Storybook. Let me know if you want me to open a PR for you to take a look 🙇

@cblavier
Copy link
Contributor

Hey Sara, please open a PR, I'd be happy to have a look

@cblavier cblavier added enhancement New feature or request good first issue Good for newcomers labels Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cblavier @sarasilvaworkera