Incomplete themes data emitted with storybook/themes/REGISTER_THEMES message event

[Olgagr]

Summary

Hello!

In our product, we embed stories without the toolbar and we want to build custom control to switch themes. We can catch theme list by catching message event storybook/themes/REGISTER_THEMES. However, the issue is that it's doesn't provide enough data to switch themes.

Example:
If I configure my themes like this:

  decorators: [
    withThemeByClassName({
      themes: {
        light: "light-theme",
        dark: "dark-theme",
      },
      defaultTheme: "light",
    })
]

and catch event, I only get this data:

{
    "key": "storybook-channel",
    "event": {
        "type": "storybook/themes/REGISTER_THEMES",
        "args": [
            {
                "defaultTheme": "light",
                "themes": [
                    "light",
                    "dark"
                ]
            }
        ],
        "from": "ec1bf6b39d5c2"
    },
    "refId": null
}

To switch themes, I should add to the iframe URL &globals=theme:dark-theme or &globals=theme:light-theme but I don't have these values.

I think the event should include data like this:

{
    "key": "storybook-channel",
    "event": {
        "type": "storybook/themes/REGISTER_THEMES",
        "args": [
            {
                "defaultTheme": "light",
                "themes": [
                    {value: 'light-theme', key: 'light'},
                    {value: 'dark-theme', key: 'dark'}
                ]
            }
        ],
        "from": "ec1bf6b39d5c2"
    },
    "refId": null
}

or the event should emit values, not keys.

Is there any particular reason why this not is implemented this way?

Additional information

Storybook version: 8.2.9
storybook/addon-themes: 8.2.9

This is a React project, generated by executing npx storybook@latest init

My preview configuration:

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    withThemeByClassName({
      themes: {
        light: "light-theme",
        dark: "dark-theme",
      },
      defaultTheme: "light",
    }),
  ],
};

Create a reproduction

No response

[Marklb]

It looks correct, based on the code.

storybook/code/addons/themes/src/decorators/helpers.ts

Lines 20 to 23 in 373ccbd

	addons.getChannel().emit(THEMING_EVENTS.REGISTER_THEMES, {
	defaultTheme,
	themes: themeNames,
	});

That event emits generic theme data that should be the same if you are using any of the theme decorators. So it would not make sense to include the CSS class name in that event, because that is unique to that decorator.

You mentioned that the event should include the value, but the key is all you should need, because the value is an implementation detail that isn't important for specifying which theme that you want to use.

Instead of &globals=theme:dark-theme, I would expect &globals=theme:dark, because the theme is "dark" and the CSS class that happens to get used for the dark theme is "dark-theme". If you change how your dark theme is implemented then you could replace withThemeByClassName with withThemeByDataAttribute, for example, but your theme name could still be "dark" even if it isn't using the CSS class "theme-dark" anymore.

[Olgagr]

@Marklb Thank you for explanation. That makes the perfect sense.