Storybook 9 uses "backgrounds" instead of "theme"

[yanickrochon]

Summary

Storybook's 9 background switcher updates the context's "globals.backgrounds.value" property. However, the official addon-themes plugin still defers to "theme" from the constants module.

Hence, switching backgrounds does not do anything in the story.

Additional information

See this line

[dosubot[bot]]

Hi @yanickrochon! I'm Dosu and I’m helping the storybook team.

Storybook 9 manages backgrounds and themes as separate globals: the backgrounds switcher updates globals.backgrounds.value, while the official addon-themes plugin relies on a theme global key. This means switching backgrounds does not affect the story's theme or appearance when using addon-themes, since the plugin does not reference the backgrounds global or integrate with the new backgrounds system (source, source).

Currently, there is no built-in way to synchronize backgrounds and themes. If you want background switching to also update the theme, you’ll need to implement a custom decorator that listens for changes to globals.backgrounds.value and maps them to the appropriate theme global. This would require manual logic in your .storybook/preview.js (or .ts) to keep both in sync.

Let me know if you’d like a sample implementation or guidance on setting up such a decorator.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[yanickrochon]

Final solution:

import type { Preview } from "@storybook/nextjs-vite";

import "@/app/globals.css";

const preview: Preview = {
  decorators: [
    (storyFn, context) => {
      const theme = context.globals.backgrounds.value ?? "";
      if (theme === "dark") {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
      return storyFn();
    },
  ],
};

export default preview;