Unattached docs not rendering theme

[atomicrobokid]

Summary

Hello, hoping someone can help me with an Angular based storybook implementation (v8).

I've got my preview.ts set up with the below config to add a data attribute (which renders on the html tag to set the theme)

  decorators: [
    withThemeByDataAttribute<AngularRenderer>({
      attributeName: 'data-theme',
      parentSelector: 'html',
      defaultTheme: 'light',
      themes: {
        light: 'light',
        dark: 'dark'
      },
    }),
  ],
    parameters: {
      themes: {
        clearable: false,
        default: 'light',
        target: 'html',
        property: 'data-theme',
        options: [
          { name: 'light', value: 'light', color: '#f5f6f7' },
          { name: 'dark', value: 'dark', color: '#443443' }
        ],
      },
    }

This works perfectly for Stories, and for .mdx files that contain a story, but for vanilla unattached .mdx files with just static content, this does not work, the prop on the html tag does not update.

A few other oddities i've noticed. The api docs for storybook-addon-themes say : "target (string - optional): Target element selected with document.querySelector() to which classes are applied. Defaults to body, root if classes should be applied to documentElement." - however no matter what i set the target to, the attribute always renders on the html tag.

Another one, is if i visit a story and switch the theme (which works) and then go to an unattached mdx page, the html data attribute leaks onto the new page, i.e the theme i've switched to renders, however it still cannot be switched.

Any help is super appreciated, tried all sorts of config and no joy so far!

edit - Looks to be similar to #26625 and the last comment in #25183

Additional information

No response

Create a reproduction

No response

[atomicrobokid]

Ok after quite a bit of fiddling, i've got it working.

So for anyone else in the future looking for a quick and dirty way to style vanilla mdx (especially in an Angular app, as the docs for writing a custom docs wrapper just didn't work)

Assuming you have @storybook/addon-themes set up like below (this is a decorator in your preview.ts)

  withThemeByDataAttribute<AngularRenderer>({
    attributeName: 'data-theme',
    parentSelector: 'html',
    defaultTheme: 'light',
    themes: {
      light: 'light',
      dark: 'dark'
    },
  })

Next add this function to your docs property in preview.ts

    docs: {
      container: (props: any) => {
        const el = document.querySelector("html");
        el!.dataset['theme'] = props?.context.store.globals.globals.theme;
        return createElement(DocsContainer, props);
      },
    },

Appreciate getting it from the store is likely to break at some point, but for now, it works and can't find any other Angular friendly solutions. Would be nice to have this working for unattached mdx out of the box so you can use your design systems themes without a load of extra config

[declanchiu]

It looks like the props.theme = theme behavior is not allowed in react

[declanchiu]

Thanks, that's my problem. I could have used a shallow copy.

[arnoldsandoval]

I got this working in storybook 8 with a minor modification on top of @atomicrobokid and @declanchiu's solution.

inside of parameters.docs

  parameters: {
     // ...
    docs: {
      container: (props: any) => {
        const el = document.querySelector("html");
        const theme =
          props?.context.store.userGlobals.globals.theme === "dark"
            ? themes.dark
            : themes.light;
        el!.dataset["theme"] = props?.context.store.userGlobals.globals.theme;
        const newProps = { ...props, theme };
        return React.createElement(DocsContainer, newProps);
      },
    },
  },

Example: https://ui.otti.dev/?path=/docs/charts-stackedhorizontalbarpair--documentation&globals=theme:dark

[reduckted]

I got this working in storybook 8 with a minor modification on top of @atomicrobokid and @declanchiu's solution.

Nice. 🎉 For how I'm setting the theme, the key was to use store.userGlobals instead of store.globals to get the theme being used.

[duncan-s-white]

Thanks so much guys!! This helped fix the same issue with a nextjs storybook 8 installation.

I was slightly confused where a couple of things were coming from, as I wasn't getting any import suggestions in VSCode, so I include the imports I needed if it helps anyone else:

import { themes } from '@storybook/theming';
import { DocsContainer } from '@storybook/blocks';