Preview class target html NOT WORKING

[sandranrivas]

When selecting html like in the documentation shown, The code will only be shown in body.

export parameters = {
  darkMode: {
    classTarget: 'html'
  }
}

I can imagine, that the error is on https://github.com/hipstersmoothie/storybook-dark-mode/blob/master/src/Tool.tsx

on line 84.

Instead of:

const updateManager = (store: DarkModeStore) => {
  const manager = document.querySelector('body');

  if (!manager) {
    return;
  }

It should be

const updateManager = (store: DarkModeStore) => {
  const manager = document.querySelector(store.classTarget);

  if (!manager) {
    return;
  }

[dmackerman]

Yep, doesn't work for me either. I had to use useDarkMode() and just add a manual wrapper.

[nlhkabu]

Not working for me either. @dmackerman would you mind sharing the code for your manual wrapper?

[rpf3]

I'm not finding this to even be setting the dark class on the iframe body either when using the default settings. For now I've added the below event listener to the preview-head.html file that parses the local storage and setts the dark class accordingly.

<script type="text/javascript">
    function updateTheme() {
        const themeString = localStorage.getItem('sb-addon-themes-3');

        if (themeString) {
            const theme = JSON.parse(themeString);

            if (theme['current'] === 'light') {
                document.documentElement.classList.remove('dark');
            } else {
                document.documentElement.classList.add('dark');
            }
        }
    }

    window.addEventListener('storage', (e) => {
        updateTheme();
    });
</script>

[enchorb]

bump on this. The solution by @rpf3 works great but this should be fixed natively in the plugin.

[hipstersmoothie]

PRs welcome!

[rpf3]

@hipstersmoothie I am taking a stab at this but I'm having a hell of a time trying to validate my fix locally. I have a skeleton Storybook project set up and was trying to link the local project but am not seeing any changes reflected, even cosmetic ones to test out the linking. Do you mind me asking what your dev workflow is?

[hipstersmoothie]

I usually just make changes to files in my node_modules and port over fixes.

If you're linking the project you'll want to make sure that you're running build:watch so any changes you make are in the files ran by storybook.

Also: I've found that you want to remove the storybook cache while developing storybook adding by running rm -rf node_modules/.cache/storybook/ && yarn storybook

[hipstersmoothie]

@rpf3 I just merged an example into the repo so you can test there or create another example that showcases the feature so you can debug

[sneko]

Wrapping in a decorator your story using useDarkMode() seems the right thing to do.

But for me, after upgrading to SB7+Next+Webpack my addons channel is no longer working (so no useDarkMode() possible) and didn't find for now the origin (ref: https://github.com/hipstersmoothie/storybook-dark-mode/issues/205).

So for me, the quick solution is to use preview-head.html with:

<script type="text/javascript">
  function updateTheme() {
    const themeString = localStorage.getItem('sb-addon-themes-3');

    if (themeString) {
      const theme = JSON.parse(themeString);
      const themeValue = theme['current'] === 'light' ? 'light' : 'dark';

      document.documentElement.dataset.theme = themeValue;
      document.documentElement.dataset.frTheme = themeValue;
      document.documentElement.dataset.frScheme = themeValue;
    }
  }

  window.addEventListener('storage', (e) => {
    updateTheme();
  });

  // Call it at start to init correctly
  updateTheme();
</script>

(big sorry for this dirty workaround)

[airtonix]

still a bug

[hipstersmoothie]

:rocket: Issue was released in v3.0.0 :rocket:

[enchorb]

still not working for me, back to using the preview.js fix