Not running in standalone canvas view ("open canvas in new tab")

[fvsch]

I have this addon running well for most use cases, but not when opening a canvas in a standalone tab so that the tab's URL is something like:

http://localhost:6006/iframe.html?id=my-component--default&viewMode=story

or:

http://localhost:6006/iframe.html?id=my-component--default&viewMode=docs

In both cases, the classes I’ve declared for my default theme are not added to the root element (as configured). So no theme is applied.

Can anyone else reproduce this issue?

[fvsch]

Looks like a limitation, since the code that sets the class(es) for the default theme runs in the manager context and reaches into the iframe's document: https://github.com/tonai/storybook-addon-themes/blob/master/src/manager/ThemeStory.tsx

My current workaround is to add classes myself via a script in preview-head.html:

<script>
  // storybook-addon-themes doesn't run in the preview itself, but adds
  // classes to the preview by reaching into the iframe. For standalone
  // views, we need to set default classes so we have a theme.
  if (document.documentElement.className === '') {
    const themes = { light: 'theme-light', dark: 'theme-dark' };
    document.documentElement.className =
      themes[new URLSearchParams(document.location.search).get('theme')] || themes.light;
  }
</script>

[tonai]

Hello @fvsch and thank you for reporting.
If the button (used to switch theme) is not rendered in the UI, the theme will not aply.
We can try to fix this, but I'm glad you found a workaround for now.
I would personnaly suggest to try the decorator.
When using the decorator, the logic is located inside it and because the decorator is available in standalone canvas mode, I think it would work without any additional workaround.