Making dark mode persist when changing story

[benjamindavid]

I'm not sure if I'm doing something wrong or if it is the default behavior but when switching to dark mode and then navigating to a different story, mode switches back to light but the toggle doesn't change, then I need to click twice to actually get back to dark mode.

I'm not doing anything fancy and got the same code as described in the README.

Thanks!

[carlesnunez]

I have the same issue

[carlesnunez]

I made a PR fixing it @benjamindavid @hipstersmoothie

[carlesnunez]

This one was fixed and released on 0.14 @benjamindavid

[pzhine]

I'm still getting this behavior in 0.1.7

[hipstersmoothie]

can you make a minimal storybook with a reproduction?

[pzhine]

Ok, found a workaround. Not sure how it would work without this, but maybe I'm missing something:

// get channel to listen to event emitter
const channel = addons.getChannel()
let storybookIsDark = false
channel.on('DARK_MODE', () => (storybookIsDark = true))

const ThemeWrapper = ({ children }) => {
  const [isDark, setDark] = useState(storybookIsDark)
  //...continues as in README

[pzhine]

Actually, that didn't persist the dark mode on refresh. I had to change useEffect to useLayoutEffect so that the channel.on call happened before render. Here's the full workaround:

// get channel to listen to event emitter
const channel = addons.getChannel()
let storybookIsDark = false
channel.on('DARK_MODE', () => {
  storybookIsDark = true
})

const ThemeWrapper = ({ children }) => {
  const [isDark, setDark] = useState(storybookIsDark)

  useLayoutEffect(() => {
    // listen to DARK_MODE event
    channel.on('DARK_MODE', setDark)
    return () => channel.removeListener('DARK_MODE', setDark)
  }, [])
  //...continues as in README 

[hipstersmoothie]

@pzhine feel free to make a PR!

[pzhine]

@hipstersmoothie you mean with an update to the README?

[hipstersmoothie]

It seems like it would be beneficial to change the code to fit your “workaround”, no?

On Wed, Oct 2, 2019 at 11:07 AM Paul Hine [email protected] wrote:

@benjamindavid https://github.com/benjamindavid you mean with an update to the README?

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/hipstersmoothie/storybook-dark-mode/issues/9?email_source=notifications&email_token=AAJDEBD7DWCLDGI2Q3AFVPDQMTPOPA5CNFSM4H54MXR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAFVG7A#issuecomment-537613180, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJDEBDTKFPSOCMVW245L43QMTPOPANCNFSM4H54MXRQ .

[pzhine]

Yeah, I think the useLayoutEffect should be added to the README, and I'll see if the "module-level var" can be worked into the addon itself.

[kishorekumaru]

Is there any better workaround? this affect the preview region not the Stories