Not able to capture the current selected background value

[cmnstmntmn]

Describe the bug I'm having

//.ondevice/preview.js

export const decorators = [withBackgrounds, ThemeDecorator];
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  backgrounds: [
    {name: 'Light', value: '#000000', default: true},
    {name: 'Dark', value: '#ffffff'},
  ],
};

Then, in my theme decorator i'm looking for the selected value inside the context object, but it doesn't seem to be there.

export const ThemeDecorator = (Story, context) => {
  const theme =  ...'; //i'm looking for the selected background value inside the context object

  return (
    <ThemeProvider dark={theme === 'dark'}>
      <Story />
    </ThemeProvider>
  );
};

System: sb 6.0.1-beta.7

[dannyhw]

@cmnstmntmn I just looked at it and I think that currently it would be difficult to do this, the only viable way would be to listen for the set background event and maintain a copy of the background colour state. However using the addons channel for events is not generally recommended for end users so use with caution.

import addons from '@storybook/addons';
export const BackgroundDecorator = (StoryFn, context) => {
  const [background, setBackground] = useState(
    context.parameters.backgrounds?.find((b) => b.default).value || ''
  );
  const channel = addons.getChannel();
  useEffect(() => {
    channel.on('storybook-addon-background:update', setBackground);
    return () => {
      channel.removeListener('storybook-addon-background:update', setBackground);
    };
  }, [channel]);
  console.log({ background });
  return (
    <>
      <StoryFn />
    </>
  );
};

[dannyhw]

Ideally we should update the backgrounds addon to copy the updated behaviour on the web.