Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toggle theme

See original GitHub issue

Is your feature request related to a problem? Please describe. Our component library inherits it’s styling from a class that is applied to the root <html> tag.

Example:

<html class="dark">
some stories 
</html>

And similar for light.

So I can get so far by including this html in the preview-head.html and then importing in our stylesheet.

In parallel I have also developed a storybook theme that is defined in config.js that looks like our dark theme.

But now I need to be able to toggle the Storybook theme, in sync with switching the class name on the html tag in the preview-head.html

Describe the solution you’d like

It would be great if there was a storybook level theme toggle, then when toggled would each story know the current theme value.

Describe alternatives you’ve considered Thinking of a add-on that shows a UI that when toggled goes and modifies the markup in the preview-head.html

Are you able to assist bring the feature to reality? yes

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:20 (10 by maintainers)

Top GitHub Comments

2reactions

leoylicommented, Apr 7, 2019

@dallas, as mentioned in this thread, please take a look on addon-contexts, this allows you to wrap your stories globally or locally with the ability to control the injected component props from storybook toolbar.

1reaction

leoylicommented, Apr 8, 2019

@dallas, Oh my bad, it’s actually more than just the story preview but the theme of the manager app too… then addon-contexts can not do such thing although may have a workaround on top of it.

In addon-contexts v1.1.0, internally, after user change the addon state from toolbar menu, the addon fires an event called addon-contexts/UPDATE_PREVIEW with the information about the current user selected contexts. If you wish to use this addon to manage your story contexts while also want the manager app to get reacted, you can subscribe this event and change the app theme accordingly (some overhead on how SB works internally, though).