How to sync withThemeByDataAttribute to global storybook background

[binaryartifex]

Ive finally figured out how to toggle my tailwind dark/light configuration via the following

  withThemeByDataAttribute({
    themes: {
      light: "light",
      dark: "dark",
    },
    defaultTheme: "light",
    attributeName: "data-mode",
  }),

with the only line required in my tailwind config file being

darkMode: ["class", '[data-mode="dark"]'],

this predictably adds the data-mode onto the story Body tag for my components to derive their theme from. however id also like to somehow sync the overall storybook background to this theme toggle as well. regardless of the order, all im trying to achieve is toggle light or dark where the storybook background is synced to the change and a data attribute is attached to the Body tag for my components to render properly...

[MattCousinsSapiens]

Having a similar issue, have just started using the new addon-themes with withThemeFromJSXProvider and its working well. But am not sure if there is a way to sync the theme to a background. Am relatively new to storybook, but could not find anything from searching.

However the Themes Add-on Page shows an image of the theme changing and also changing the background at the same time.

If this is not a currently supported feature would be handy to be able to supply the themes as an object such as below to both label them nicely in the dropdown and provide a background that syncs using the background add-on if being used:

decorators: [
    withThemeFromJSXProvider({
        themes: {
            coresuiteLight: {
                theme: coresuite(ThemeModes.LIGHT),
                label: 'Coresuite - Light',
                background: 'light'
            coresuiteDark: {
                theme: coresuite(ThemeModes.DARK),
                label: 'Coresuite - Dark',
                background: 'dark'
            }
        },
    Provider: ThemeProvider,
    }),
],

[JReinhold]

The theme of Storybook's manager UI (sidebar, addons, etc.) is completely separate from the theme of the preview (where your stories are shown). Right now there's no way to sync the two.

There's a community addon storybook-dark-mode that attempts to do something similar that you could try out. It works independently of addon-themes, so it might not be a perfect solution.

[MattCousinsSapiens]

Sorry, I may have misstated the request. I am talking about the preview area, not Storybooks outer UI area. I am just trying to change the background of the preview area so it better represents the color the component will be on if the theme is dark for components where the background color of the component itself is not set.

For example, in the screenshot, if I change my theme to dark, the background of the preview area remains light and I have to manually switch the background to dark to see the component text.

Maybe the background isn't the correct thing to change and I should use a decorator to wrap my components to give them a background? If I do that can I get the selected theme and react to it somehow.

Again, the link below shows this happening when changing the theme:
https://storybook.js.org/addons/@storybook/addon-themes

[JReinhold]

Ah I see. Well in that case it's about adding a global decorator that reacts to the theme the same way you components does. This of course depends on which styling solution you're using.

Here's some psuedo code matching tailwind describing how it could be done:

import React from 'react';

import { Preview } from '@storybook/react';

const preview: Preview = {
  decorators: [
    ... the decorator from addon-themes,
    (Story) => (
      <div className="bg-white dark:bg-black">
        <Story />
      </div>
    ),
  ],
};

export default preview;

[marvimarvv]

Having the same question here. I am using Tailwind and am wondering how I can sync the background I am using for the light and dark mode with the story background when switching themes with the addon. Also really confused by the GIF in the readme where it happens automatically.

[kcrwfrd]

Thank you @JReinhold I was able to figure this out from your comment and referring to the source for withThemeByClassName.

// in .storybook/preview.js
import { withThemeByClassName } from '@storybook/addon-themes'
import { useEffect } from '@storybook/preview-api'

// ...

export const decorators = [
  withThemeByClassName({
    themes: {
      light: 'light',
      dark: 'dark'
    },
    defaultTheme: 'light'
  }),

  // Adds dark/light background to preview canvas.
  storyFn => {
    useEffect(() => {
      document.documentElement.classList.add('bg-white', 'dark:bg-black')
    }, [])

    return storyFn()
  }
]

It does not sync Storybook's "background" setting. I also had to make sure to remove a default from my backgrounds (or remove backgrounds entirely) so that it wouldn't conflict.