addon-themes: ability to have multiple buttons

[VincentGarreau]

Is your feature request related to a problem? Please describe.

In my design system, for each theme I have a light and dark mode.
In my code, it's managed by setting a data-theme and a data-mode attribute.

Problem: Unless I'm mistaken, I didn't manage to load the addon twice (in my case setting withThemeByDataAttribute twice in the decorators), and it seems we can't set multiple "themes".

Describe the solution you'd like

Having the ability to have multiple switchers, like in the screen below:

below

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[JonJamesDesign]

I figured out a way you can achieve this.

So this solution doesn't give you two buttons, but it does give you a single button that can be used to toggle two (or more) custom data-* attributes:

.storybook/preview.ts:

import { DecoratorHelpers } from '@storybook/addon-themes';
import { useEffect as usePreviewEffect } from '@storybook/preview-api';
import type { Preview } from '@storybook/react';

const withThemeByDualDataAttributes = ({ themes, defaultTheme }) => {
  initializeThemeState(Object.keys(themes), defaultTheme);

  return (storyFn, context) => {
    const { themeOverride } = useThemeParameters();
    const selectedTheme = pluckThemeFromContext(context);

    usePreviewEffect(() => {
      const parentElement = document.querySelector('html');
      const themeKey = themeOverride || selectedTheme || defaultTheme;

      const [brandTheme, colorMode] = themes[themeKey];

      if (parentElement) {
        parentElement.setAttribute('data-theme', brandTheme);
        parentElement.setAttribute('data-mode', colorMode);
      }
    }, [themeOverride, selectedTheme]);

    return storyFn();
  };
};

const preview: Preview = {
  decorators: [
    withThemeByDualDataAttributes({
      themes: {
        'Brand A (Light)': ['brand-a', 'light'],
        'Brand A (Dark)': ['brand-a', 'dark'],
        'Brand B (Light)': ['brand-b', 'light'],
        'Brand B (Dark)': ['brand-b', 'dark'],
      },
      defaultTheme: 'Brand A (Light)',
    }),
  ],
  // ...
};

export default preview;