Unable to switch theme back to "light"

[domyen]

Describe the bug
I'm unable to switch the theme back to "light" after using the dark theme. The only resolution is the localstorage.clear() hack.

To Reproduce
Steps to reproduce the behavior:

1. Clone the Storybook Design System project.
2. Go to SB config.js and import { themes } from '@storybook/theming';
3. Set options: { theme: themes.dark } to show the dark theme
4. Comment out above and refresh. It shows dark theme (but should go back to light). And when I set it manually to themes.light it does not refresh either.

Expected behavior
When I do not set a theme it should reset the theme.

Screenshots
Here's a 📹video of this behavior.

System:

• OS: Mac OS
• Device: Macbook Pro 2018
• Browser: Chrome, safari
• Framework: React
• Version: 5.2.x

[Saifadin]

Happens for me too. The only difference is, that I work on a React based Storybook, that has the dark theme and i also use an HTML based Storybook. When switching between them, only localStorage.clear works and i loose all other customisations i made to my storybook.

[ndelangen]

@Saifadin one recommendation I can give right now, is to not have the 2 storybooks share the same port.

I'll implement #6806 (hopefully soon), which will remove the need to cache the theme in localStorage all-together.

[stale]

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]

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!

[patrick-radulian]

Is there any update on this issue? I looked into theming a react storybook and followed the documentation / tutorial, using the dark theme at first.
To explore possibilities I then created a custom theme and then tried to revert that before implementing more serious theme changes - that's when it broke for me as well, keeping parts of the light theme, parts of the dark theme and parts of my placeholder-custom-theme.

Storybook version: 5.3.0-beta.14

[shilman]

@patrick-radulian yes there's been an update here.

@ndelangen has updated the recommended theming API here:

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/theming/index.md#global-theming

I don't know if this will fix the issue directly, or whether it's part of a longer-term breaking change that won't be usable until 6.0. In the meantime, the workaround is to run on different ports. @ndelangen can yo comment?

[ndelangen]

I removed the code that persists the theme, because the FOUC should no longer happen.

[ndelangen]

@patricklafrance woulds you be able to review/test?

[patrick-radulian]

Sorry for the late reply

I've updated to storybook 5.3.0-beta.25 (could not updated to beta.30 because of a problem with peer-dependencies right now, as it seems) but the situation is still the same.
Changing the theme in the options parameter requires localStorage.clear() to be recodnized.

The same thing is going on with other options apparently - I've tried playing with the panelPosition option, setting it to right and back to bottom - also this is only updated after clearing the localStorage.

[shubhamholkar007]

is there any simple option than creating new simple theme ?

[shilman]

This is getting fixed in #9076 which will hopefully be merged/released soon.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.28 containing PR #9076 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.