storybook: Addon-Docs: Changing the theme via api doesn't persist in Docs

Describe the bug I have an addon tool that handles the storybook theme through the api:

// inside my addon

api.setOptions ({
  theme: themes[base],
});

The Storybook matches, but Docs don’t change. Docs works with the dark theme just by adding through addParametes:

// config.js

import { themes } from '@storybook/theming';

addParameters({
  options: {
    theme: themes.dark,
},

Expected behavior That when changing the theme through the storybook API, it trigger the Docs theme

Screenshots issue

System: Environment Info:

System: OS: macOS 10.15.4 CPU: (4) x64 Intel® Core™ i5-5257U CPU @ 2.70GHz Binaries: Node: 10.16.0 - /usr/local/bin/node Yarn: 1.9.4 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Browsers: Chrome: 81.0.4044.122 Firefox: 74.0 Safari: 13.1 npmPackages: @storybook/addon-a11y: ^5.3.18 => 5.3.18 @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-docs: ^5.3.18 => 5.3.18 @storybook/addon-knobs: ^5.3.18 => 5.3.18 @storybook/addon-storysource: ^5.3.18 => 5.3.18 @storybook/addon-viewport: ^5.3.18 => 5.3.18 @storybook/addons: ^5.3.18 => 5.3.18 @storybook/react: ^5.3.18 => 5.3.18 @storybook/storybook-deployer: ^2.8.3 => 2.8.5

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 15
  • Comments: 24 (15 by maintainers)

Most upvoted comments

hey @shilman, are you planning to include this soon? it would be great! 🙏

Bump on this one - would love to see dynamic theming for docs!

Any update on this?

@shilman this instruction set the theme in the initial state. Is there a way to change at run time?

I want to change the theme of the Storybook, Docs and Design System at once:

Screen Shot 2020-04-23 at 15 59 09

I’m looking for this same thing too for https://github.com/hipstersmoothie/storybook-dark-mode/. I need a way to dynamically set the theme for the addon-docs tab.

@shilman @tmeasday @ndelangen I apologize for mentioning, but have you come to any solution?

Prior to version 6.4 there was a workaround with dynamically installing the theme through the substitution of DocsContainer props : https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-802018811 . But it doesn’t work anymore.

Thanks @shilman. I think I was able to narrow down the issue to the useParameter() hook from api. It seems to never get the initialized parameters for doc stories, at least until you’ve switched to a component story and then back.