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

[angelolucas]

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(R) Core(TM) 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

[shilman]

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

[angelolucas]

@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:

[shilman]

I believe docs is dynamically themable but Storybook UI is not cc @ndelangen

[hipstersmoothie]

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]

@hipstersmoothie OK I misunderstood the issue. In master, docs is themed by the options.theme parameter per this issue. In next, docs is themed via the docs.theme parameter per https://github.com/storybookjs/storybook/pull/10114. How did your addon work before api.setOptions existed?

@tmeasday is it possible to update parameters dynamically, or perhaps we should consider moving to globalArgs instead?

[ndelangen]

setting the theme is possible at runtime for the manager:
https://github.com/storybookjs/storybook/blob/a14bf2aa77802bfd53721246ac0879ee2d85ac88/lib/api/src/modules/layout.ts#L223-L262

[hipstersmoothie]

@shilman This is how I have always set the theme for storybook https://github.com/hipstersmoothie/storybook-dark-mode/blob/master/src/Tool.tsx#L90 I'm not sure that theming ever worked with the docs tab (https://github.com/hipstersmoothie/storybook-dark-mode/issues/70) for this addon.

is it possible to update parameters dynamically

This is exactly what I need. I saw the globalArg function but it seems like it was for the new args feature

[tmeasday]

is it possible to update parameters dynamically

No? I haven't really been following the discussion above but the obvious answer to that question is of course not. That's exactly why we made global args.

[hipstersmoothie]

So the question remains: How can I dynamically theme addon-docs? If it's through global args that's cool. I just read through the doc and it doesn't mention parameters very much.

[shilman]

@tmeasday in that case either #10114 was wrong and we should switch to globalArgs (which is possible because we haven't released 6.0 yet), or we should forego dynamic theming in docs. thoughts?

[ndelangen]

I think it should use global args then?

[tmeasday]

Yeah, I guess?

I think we’ll likely keep running into challenges deciding if things should be configured via parameters vs global args. Perhaps we should make a pattern where certain things are can be configured both ways.

What do you think folks?

[ndelangen]

Yeah that seems very very likely to me too tom..

[Claudia-Sardinha-Bose]

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

[igloude]

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