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
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)
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:
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.
In 6.0 we’ve moved to a parallel theming structure for docs:
https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
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.