[Bug]: Preview always has a white background

[Jasperrr91]

Describe the bug

Hi there, this recent pull request: #21593 seems to have broken @storybook/theming. Looking at the PR description the change was verified with the default backgrounds addon but it looks like @storybook/theming slipped through. This package is used by many addons to customise the styling, for instance https://www.npmjs.com/package/storybook-dark-mode with 190k weekly downloads.

We used to be able to set the Preview background with appContentBg. This is then converted to theme.background.content by: https://github.com/storybookjs/storybook/blob/latest-release/code/lib/theming/src/convert.ts#L117

It is then applied to the iFrame wrapper <div id="storybook-preview-wrapper"> at:
https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/components/preview/utils/components.ts

However, the underlying iFrame storybook-preview-iframe now has this newly introduced backgroundColor: white which renders the customised appContentBg useless:
https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/components/preview/iframe.tsx

I'm not entirely sure about the problem that @JReinhold tried to solve (maybe you could elaborate more Jeppe) but it was desired behaviour to be able to set the background color. Maybe a change caused the appContentBg to unexpectedly be overwritten in dark mode. In that case we should probably look over there to solve that bug.

Optionally, the backgroundColor: white could also be replaced by a backgroundColor: theme.background.content but this seems like it won't solve your bug as the iFrame wrapper already had that color applied to it.

To Reproduce

1. Setup a default instance of Storybook
2. Overwrite appContentBg with @storybook/theming, for example with storybook-dark-mode
3. Load any story to see that preview always remains white

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 111.0.1
    Safari: 15.6.1

Additional context

No response

[quantizor]

It’s this issue #21798

[jaggerstar]

I think here is the root cause: 9148c66

[Jasperrr91]

It’s this issue #21798

That's an unrelated issue.

[sekeidesign]

Any updates on this? It doesn't look like it's just a background colour issue on our end, but like the preview ignores the theming entirely: text colour, font, background colour, none of them have any effect on the look of the preview which makes it really difficult to use for an app like ours that only has dark mode

[BnAmN]

I‘m using the following workaround (for now):

<!-- .storybook/manager-head.html -->
<style>
  #storybook-preview-iframe {
    background-color: transparent !important;
  }
</style>

Tested with storybook-dark-mode which seems to be working again using this workaround.

Maybe this helps someone else too until the issue got addressed.

[sekeidesign]

I‘m using the following workaround (for now):

<!-- .storybook/manager-head.html -->
<style>
  #storybook-preview-iframe {
    background-color: transparent !important;
  }
</style>

Tested with storybook-dark-mode which seems to be working again using this workaround.

Maybe this helps someone else too until the issue got addressed.

Unfortunately this doesn't work for me (might just be a product of our setup).
Adding some similar css to our base.css does work, but we need to write custom css for everything since just updating the background colour only solves one of the issues with dark mode, but not everything else 😢

[BnAmN]

I‘m using the following workaround (for now):

<!-- .storybook/manager-head.html -->
<style>
  #storybook-preview-iframe {
    background-color: transparent !important;
  }
</style>

Tested with storybook-dark-mode which seems to be working again using this workaround.
Maybe this helps someone else too until the issue got addressed.

Unfortunately this doesn't work for me (might just be a product of our setup). Adding some similar css to our base.css does work, but we need to write custom css for everything since just updating the background colour only solves one of the issues with dark mode, but not everything else 😢

Well for the Docs view you can simply create your own DocsContainer to get the docs affected by storybook-dark-mode:

/* .storybook/preview.tsx */
import {themes} from '@storybook/theming';
import {DocsContainer} from './DocsContainer';

/* (...) */

export const parameters = {
  /* (...) */
  darkMode: {
    dark: {...themes.dark},
    light: {...themes.light},
    stylePreview: true,
    darkClass: 'dark'
  },
  docs: {
    container: DocsContainer
  }
};

/* .storybook/DocsContainer.tsx */
import React, {PropsWithChildren} from 'react';
import {DocsContainer as BaseContainer, DocsContainerProps as BaseContainerProps} from '@storybook/blocks';
import {themes} from '@storybook/theming';
import {useDarkMode} from 'storybook-dark-mode';

export const DocsContainer = (
  props: PropsWithChildren<BaseContainerProps>
) => {
  const dark = useDarkMode();
  return (
    <BaseContainer
      context={props.context}
      theme={dark ? themes.dark : themes.light}
    >
      {props.children}
    </BaseContainer>
  );
};

[JReinhold]

The solution we're proposing to this in #24575 is to introduce a new separate theming variable, appPreviewBg to set the preview background in your theme, with storybook-dark-mode or by other means.

The PR is released as canary version 0.0.0-pr-24575-sha-3de4e9e0 so you can install that to try it out.

There's also a StackBlitz that demonstrates how it behaves with/without storybook-dark-mode and @storybook/addon-themes: stackblitz.com/edit/github-u7boko?file=.storybook%2Fpreview.ts

Let me know what you think @Jasperrr91 @sekeidesign

[HugoRamonPereira]

I am still experiencing it, I tried many workarounds, downloaded storybook-dark-mode, followed the steps, tweaked a lot of files and nothing... just gonna leave it all white...

[donverduyn]

This might help. Gotta say, setting up storybook properly with dark mode take a serious amount of effort to get it right. The useDarkMode hook is no longer usable with the DocsContainer, but i found an alternative. There are also plenty of inconsistencies that are easily fixed, but i assume they would cause backward compatibility issues upstream. If someone is looking for css overrides, let me know.

import * as React from 'react';
import {
  DocsContainer as BaseContainer,
  DocsContainerProps,
} from '@storybook/blocks';
import { addons } from '@storybook/preview-api';
import { themes } from '@storybook/theming';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';

const channel = addons.getChannel();

export const DocsContainer: React.FC<
  React.PropsWithChildren<DocsContainerProps>
> = ({ children, context }) => {
  const [isDark, setDark] = React.useState(() => {
    const channel = addons.getChannel();
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error data is private
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    return (channel.data?.DARK_MODE?.[0] as boolean | undefined) ?? false;
  });

  const theme = React.useMemo(
    () => ({
      ...(isDark ? themes.dark : themes.light),
      fontBase: 'Proxima Nova',
    }),
    [isDark]
  );

  React.useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, setDark);
    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [channel]);

  return (
    <BaseContainer
      context={context}
      theme={theme}
    >
      {children}
    </BaseContainer>
  );
};

[beetol]

I am still experiencing it, I tried many workarounds, downloaded storybook-dark-mode, followed the steps, tweaked a lot of files and nothing... just gonna leave it all white...

I fixed it by adding appPreviewBg (per the Storybook 7.6 release on appPreviewBg)

const preview = {
  parameters: {
    darkMode: {
      dark: {
        ...themes.dark,
        appBg: 'black',
        appPreviewBg: "gray", // set appPreviewBg
      },
    },
};