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.

[yablonya]

In fact, I found a way to get the current colour value of the canvas through context with expression context.globals.backgrounds.value:

    (Story, { context }) => {
      // const themesContext = React.useContext(ThemesContext);
      //
      // React.useEffect(() => {
      //   const globalTheme = defaultThemes[context.globals.theme as keyof typeof defaultThemes];
      //   themesContext.setTheme(globalTheme);
      // }, [themesContext.currentTheme, context.globals.theme]);
      
      const isCanvasBgSet= context.globals.backgrounds.value !== "transparent";
      const canvasBg = isCanvasBgSet ? "transparent" : "var(--bg-primary)";

      return (
        <div
          className={themesContext.currentTheme}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "40px 20px",
            backgroundColor: canvasBg,
          }}
        >
          <Story />
        </div>
      );
    },
    (Story) => {
      return (
        <ThemesProvider>
          <Story />
        </ThemesProvider>
      );
    },
  ],```

Commented parts aren't related to its usage