hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
435 stars 56 forks source link

Default theme always resets to configured value #179

Closed thany closed 1 year ago

thany commented 2 years ago

I added a default theme:

export const parameters = {
  darkMode: {
    // ...
    current: 'light',
  },
};

This causes the theme to reset to light every time when selecting another story.

This is incorrect when considering the documention:

Order of precedence for the initial color scheme:

  1. If the user has previously set a color theme it's used
  2. The value you have configured for current parameter in your storybook
  3. The OS color scheme preference

So, a previously set theme by the user should take precedence. And it'd make perfect sense if it did that.

Develonaut commented 2 years ago

I think this issue is in this hook: https://github.com/hipstersmoothie/storybook-dark-mode/blob/master/src/Tool.tsx#L181

The current value set in the store is being overwritten with the default that was defined in the parameters. I think it needs to be updated to prefer the store's current and fallback to the params current.

updateStore({
  ...currentStore,
  ...darkModeParams,
  current: currentStore.current || darkModeParams.current,
});

I went ahead and made a PR for the change after testing it locally and having the theme persist between refreshing and story changes: https://github.com/hipstersmoothie/storybook-dark-mode/pull/185

hipstersmoothie commented 1 year ago

Gonna close this since a pr was submitted to fix. if it persists feel free to create another PR