Dynamically changing dark/light mode of the navigator

[assimovt]

Hello.

I've got a question regarding theming the storybook navigator. I've followed the example in this repository and configured the theme like this:

import { Appearance } from 'react-native'
import { getStorybookUI, configure } from '@storybook/react-native'
import theme from 'ui/theme'

configure(() => {
  // my stories
}, module)

const StorybookUIRoot = getStorybookUI({
  asyncStorage: null,
  theme:
    Appearance.getColorScheme() === 'dark'
      ? theme.dark.storybook
      : theme.light.storybook,
})

export default StorybookUIRoot

It works well, but I have to reload the simulator every time I change the appearance. So, how can I dynamically apply the theme of the storybook navigator (not UI components, they're handled outside with my custom theme context), for instance using color scheme hook?

[dannyhw]

@assimovt hey sorry for the slow reply, will have to check and get back to you.

[satheshrgs]

@dannyhw Any updates on this ?

Also am thinking of an usecase in which we can set it directly from the addon. I have created a new addon for Themes with options Light, Dark, Auto. Changing anything from here would directly update the theme for the entire storybook

[dannyhw]

hey yeah sorry I guess I forgot to respond at the time, currently its not really possible to change the theme at runtime without doing a reload of the app. However I think it would be valuable change to enable this, I can only really promise to add it to the backlog for now however I'm always open to PR's.

[satheshrgs]

Cool, Thanks

[dannyhw]

there is now a dark/light mode that will dynamically change when you change the device appearance settings.