Storybook: Addon-toolbar: switch storybook theme

[sarah-martinellibenedetti]

Describe the bug
Sorry, this is more of a question than a bug: I have the addon-toolbar working with styled components to change the theme. I'd like also to switch the storybook theme, but wasn't able to do so on preview.js neither on manager.js. Isn't it possible to access the context inside the addParameters?

To Reproduce
On preview.js:

addParameters(
  context => ({ options: {
    theme: context.globalArgs.theme === "dark" ? themeA : themeB
  } })
);

Both themeA and themeB were created following the documentation.

Expected behavior
would like to access the context inside addParameters. Or to be able to switch storybook theme in preview.js or manager.js by selecting an option from addon-toolbar

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:
System:
OS: Windows 10 10.0.18362
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 12.16.2 - C:Program Filesnodejsnode.EXE
npm: 6.14.4 - C:Program Filesnodejsnpm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@storybook/addon-a11y: ^5.3.17 => 5.3.18
@storybook/addon-actions: ^6.0.0-alpha.29 => 6.0.0-alpha.31
@storybook/addon-docs: ^6.0.0-alpha.29 => 6.0.0-alpha.31
@storybook/addon-knobs: ^5.3.17 => 5.3.18
@storybook/addon-links: ^6.0.0-alpha.29 => 6.0.0-alpha.31
@storybook/addon-storysource: ^5.3.17 => 5.3.18
@storybook/addon-toolbars: ^6.0.0-alpha.27 => 6.0.0-alpha.27
@storybook/addon-viewport: ^5.3.19 => 5.3.19
@storybook/addons: ^6.0.0-alpha.29 => 6.0.0-alpha.31
@storybook/preset-create-react-app: ^2.1.1 => 2.1.1
@storybook/react: ^6.0.0-alpha.29 => 6.0.0-alpha.31
@storybook/source-loader: ^5.3.18 => 5.3.18

Additional context
Add any other context about the problem here.

[shilman]

@ndelangen maybe you can help shed some light here

[ndelangen]

This is how to set a theme from manager.js:

https://github.com/storybookjs/storybook/blob/341fc2d90d4f3ae42fd9b68173b9f7b1856917f0/examples/dev-kits/manager.js#L11-L20

Does this help?

[sarah-martinellibenedetti]

@ndelangen, unfortunately, it seems I did not write my doubt in a clear way, sorry.

Your snippet doesn't help because I need to be able to switch themes in the manager.js based on the theme selected via the addon-toolbar created on the preview.js file. I don't know how to access the context.globalArgs.theme in the manager.js file. Is there a way to do so?

[ndelangen]

Yes there is:

import { useStorybookState, useStorybookApi } from '@storybook/api';

// inside a react component rendered in an addon:
const api = useStorybookApi();
const state = useStorybookState();

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

I think this example can help:

https://github.com/storybookjs/storybook/blob/master/examples/dev-kits/manager.js#L56