Storybook v7: dark mode is not applied anymore on the story main body

[soullivaneuh]

Summary

Since v7, switching to dark mode does not have any effect to the preview body anymore:

Screenshot


Only the Storybook UI theme is changed.

Apparently, this plugin update the style of the #storybook-preview-wrapper DOM element, wrapping the iframe

However, since v7, the background color seems to be defined directly on the body.sb-show-main DOM element of the preview iframe, resulting of an overriding of the storybook-dark-mode setting appliance.

[soullivaneuh]

As a workaround, you can hack that on your a main story decorator like that:

diff --git a/.storybook/components/StoryDecorator.tsx b/.storybook/components/StoryDecorator.tsx
index e801979..7ac380c 100644
--- a/.storybook/components/StoryDecorator.tsx
+++ b/.storybook/components/StoryDecorator.tsx
@@ -7,6 +7,9 @@ import React, {
 import {
   DecoratorFn,
 } from '@storybook/react';
+import {
+  themes,
+} from '@storybook/theming';
 import {
   useDarkMode,
 } from 'storybook-dark-mode';
@@ -45,6 +48,11 @@ export const StoryDecorator: DecoratorFn = (Story: any, {
 }) => {
   const dark = useDarkMode();

+  useEffect(() => {
+    const backgroundColor = dark ? themes.dark.appBg : themes.light.appBg;
+    document.body.style.backgroundColor = backgroundColor || 'inherit';
+  }, [dark]);
+
   return (
     <React.StrictMode>
       <Suspense fallback="loading...">

Also ensure it is configured globally:

// .storybook/preview.ts
export const decorators: DecoratorFn[] = [
  StoryDecorator,
];

[Jasperrr91]

Experiencing the same issue, although the plugin for me applies the desired background color on the <div id="storybook-preview-wrapper" /> element with the background-color being overwritten to white on the <iframe id="storybook-preview-iframe" />. (This is with appContentBg btw).

[Jasperrr91]

Alright, I figured out what's going on. For the full rundown check out: https://github.com/storybookjs/storybook/issues/22029

[unional]

I notice this on the overview page (i.e. mdx files). Individual story files are working fine.

The class is not added to the body in the iframe.

[quantizor]

Once this is settled it should be fixed https://github.com/storybookjs/storybook/issues/21798

[hipstersmoothie]

Anything we can do here?

[IonVillarreal]

maybe this will help

https://github.com/hipstersmoothie/storybook-dark-mode/issues/180#issuecomment-1573276315

[gildembergleite]

The problem is very simple to solve.

Inside .storybook > preview.ts, add the following excerpt, inside parameters:

backgrounds: {
   default: 'dark'
},

For documentation/.mdx type files, use the configuration below:

docs: {
  theme: themes.dark
}

The code should look like this:

import type { Preview } from "@storybook/react";

const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
     backgrounds: {
       default: 'dark'
     },
    docs: {
      theme: themes.dark
    }
   },
};

export default preview;