Repository: storybook
Issue: [Bug]: @storybook/addon-themes withThemeByDataAttribute decorator not working
Labels: bug,needs triage

### Describe the bug

For semantics, I'll refer to each concept as the following:

- Mode - such as light or dark mode
- Theme - for the visual theme (color palette, styles, etc)

---

## Intended Use Case

1. We're using Tailwind and wish to be able to toggle dark mode using the class strategy (toggling `.dark` class)
3. We also needing to set a wrapping `data-theme` attribute that is used for themes.
4. This means we need to use both `withThemeByClassName` and `withThemeByDataAttribute` in parallel

## Results

1. Tailwind is working, and using `withThemeByClassName` works as expected. The UI appears to toggle `.dark` as expected.
2. Using `withThemeByDataAttribute` is not working. The UI dropdown picker is shows my list of theme options, but no visible changes occur when selecting a theme. As far as I can tell it's completely non-functional. Searching the DOM tree in Chrome I cannot find a reference to `data-theme`.
3. Only one decorator seems to work at a time, and it seems to favor `withThemeByClassName`

Here's what we see with `withThemeByClassName` enabled:

![mode](https://github.com/storybookjs/storybook/assets/1509726/0ddf1f98-a80d-4d88-86d5-d355a24d13b2)

Here's what we see with `withThemeByDataAttribute` enabled:

![data-theme](https://github.com/storybookjs/storybook/assets/1509726/6acbeb4a-8519-43ad-b7ec-47bfc508d904)


### To Reproduce

Please refer to the "Additional Content" section below for an explanation of how we intend to use `withThemeByDataAttribute`

```ts
decorators: [
	withThemeByDataAttribute<SvelteRenderer>({
		themes: {
			skeleton: 'skeleton',
			wintry: 'wintry',
			modern: 'modern'
		},
		defaultTheme: 'skeleton',
		attributeName: 'data-theme'
	}),
	withThemeByClassName<SvelteRenderer>({
		themes: {
			light: '',
			dark: 'dark'
		},
		defaultTheme: 'light'
	})
]
```

### System

```bash
System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.0 - /opt/homebrew/bin/npm
    pnpm: 8.10.2 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^8.0.4 => 8.0.4 
    @storybook/addon-interactions: ^8.0.4 => 8.0.4 
    @storybook/addon-links: ^8.0.4 => 8.0.4 
    @storybook/addon-themes: ^8.0.4 => 8.0.4 
    @storybook/blocks: ^8.0.4 => 8.0.4 
    @storybook/svelte: ^8.0.4 => 8.0.4 
    @storybook/sveltekit: ^8.0.4 => 8.0.4 
    @storybook/test: ^8.0.4 => 8.0.4 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.4 => 8.0.4 
```

### Additional context

To provide more context, I'm the creator and core maintainer for [Skeleton](skeleton.dev). We're trying to enable the use of Storybook to document components built using Skeleton's styles and theme system.

In a nutshell, our themes work like this:

```css
[data-theme="skeleton"] {
  --color-primary-500: green;
  /* ... */
}
[data-theme="modern"] {
  --color-primary-500: blue;
  /* ... */
}
```

These CSS variables are ingested into a Tailwind plugin, which extends Tailwind with new classes, resulting in:

```css
.bg-primary-500 { background-color: var(--color-primary-500); }
```

We then combine both Tailwind and Skeleton utility classes to create Tailwind "components" like so:

```css
.btn { @apply bg-primary-500 }
```

This means the button styles can differ for each theme. In order to implement this, we set the data-theme attribute:

> NOTE: we default to the `<body>` element, but any wrapping element is fine.

```html
<body data-theme="skeleton">...<body>
```

## Current Workaround

Note that I have tested a custom [Decorator](https://storybook.js.org/docs/writing-stories/decorators) that implements both the class and attribute. This works as expected, however I'd love to have this set once in a global scope, and with the quick UI toggles and selection to switch between options.

```html
<div class="dark" data-theme="skeleton"><slot /></div>
```

Result:

![Screenshot 2024-03-22 at 12 30 25 PM](https://github.com/storybookjs/storybook/assets/1509726/94d6cd1b-169a-49c8-8abc-2c95872b98fc)