[Bug]: Storybook Background is flashing when switching stories

[Nabil-MEDIOUNI]

Describe the bug

Hi @shilman I'm using Storybook V8.0.10 along with storybook-dark-mode v4.0.0.

Here's the present scenario: upon initially navigating to a story after clearing the cache, the screen flickers between dark and light modes. However, if I've previously visited that particular story, this flashing behavior doesn't occur.

Untitled_ May 9, 2024 10_19 PM.webm

main.ts

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';

const glob = require('glob');
const path = require('path');
const appDirectory = path.resolve(__dirname, '../');
const getStories = () =>
  glob.sync(
    `${appDirectory}/packages/**/*.@(stories.js|stories.jsx|stories.ts|stories.tsx)`,
    {
      ignore: `${appDirectory}/packages/**/dist/**/*.@(stories.js|stories.jsx|stories.ts|stories.tsx)`,
    }
  );

const config: StorybookConfig = {
  core: {},
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  stories: getStories(),
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@storybook/addon-coverage',
    'storybook-dark-mode',
  ],
  async viteFinal(storybookConfig) {
    return mergeConfig(storybookConfig, {
      resolve: {
        preserveSymlinks: true,
      },
      server: {
        fs: {
          allow: ['..'],
        },
        watch: {
          ignored: ['!**/node_modules/@banking-platform/**'],
        },
      },
      assetsInclude: ['**/*.md'],
    });
  },
  docs: {
    autodocs: true,
  },
};

export default config;

preview.jsx

import { create } from '@storybook/theming';

import Docs from '../../.storybook/docs';

import { createDarkTheme, createLightTheme } from '../../.storybook/theme';

import '../../.storybook/assets/stories.scss';
import '../../.storybook/assets/style.scss';

import ThemeDecorator from './theme-decorator';

const lightTheme = create({
  ...createLightTheme,
});

const darkTheme = create({
  ...createDarkTheme,
});

const customViewports = {
  mobile: {
    name: 'Mobile',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  tablet: {
    name: 'Tablet',
    styles: {
      width: '840px',
      height: '1194px',
    },
  },
};

const parameters = {
  backgrounds: {
    default: 'Surface',
    values: [
      {
        name: 'Background',
        value: 'var(--color-background-default)',
      },
      {
        name: 'Surface',
        value: 'var(--color-surface-default)',
      },
    ],
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    storySort: {
      order: ['Foundation', 'Actions', 'Inputs'],
    },
  },
  darkMode: {
    current: 'light',
    dark: darkTheme,
    light: lightTheme,
  },
  docs: {
    page: () => <Docs framework="react" />,
  },
  viewport: { viewports: customViewports },
};

const decorators = [
  (Story) => (
    <ThemeDecorator>
      <Story />
    </ThemeDecorator>
  ),
];

const preview = {
  parameters,
  decorators,
};

export default preview;

Reproduction link

N/A

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files (x86)\Yarn\bin\yarn.CMD <----- active
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @storybook/addon-a11y: ^8.2.6 => 8.2.6
    @storybook/addon-actions: ^8.2.6 => 8.2.6
    @storybook/addon-coverage: ^1.0.4 => 1.0.4
    @storybook/addon-essentials: ^8.2.6 => 8.2.6
    @storybook/addon-interactions: ^8.2.6 => 8.2.6
    @storybook/addon-links: ^8.2.6 => 8.2.6
    @storybook/manager-api: ^8.2.6 => 8.2.6
    @storybook/react: ^8.2.6 => 8.2.6
    @storybook/react-vite: ^8.2.6 => 8.2.6
    @storybook/test: ^8.2.6 => 8.2.6
    @storybook/test-runner: ^0.19.1 => 0.19.1
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.2.6 => 8.2.6
    storybook-dark-mode: ^4.0.2 => 4.0.2

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To address the flickering issue when switching stories, you can try the following steps:

1. Update preview.tsx: Ensure that the backgrounds parameter is set correctly to avoid conflicts with the dark mode addon. Modify the parameters object in preview.tsx to include the backgrounds options:

export const parameters = {
  backgrounds: {
    default: 'light',
    values: [
      { name: 'light', value: '#ffffff' },
      { name: 'dark', value: '#000000' },
    ],
  },
  darkMode: {
    current: 'light',
    dark: darkTheme,
    light: lightTheme,
  },
  // other parameters...
};

2. Check main.ts: Ensure that the storybook-dark-mode addon is correctly listed in the addons array:

const config: StorybookConfig = {
  // other configurations...
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    'storybook-dark-mode',
  ],
  // other configurations...
};

3. Ensure Consistent Theme Application: In preview.tsx, make sure the theme is applied consistently across all stories. You can use a decorator to wrap all stories with the theme provider:

const decorators = [
  (Story) => (
    <ThemeDecorator>
      <Story />
    </ThemeDecorator>
  ),
];

export const preview = {
  parameters,
  decorators,
};

These steps should help mitigate the flickering issue when switching stories.

References

/.github/DISCUSSION_TEMPLATE/help.yml /test-storybooks/server-kitchen-sink/stories/addons/backgrounds.stories.json /.github/DISCUSSION_TEMPLATE/ideas.yml /code/presets/server-webpack/src/lib/compiler/testfixtures/backgrounds.json /code/.storybook /docs/_snippets/storybook-backgrounds-addon-default-params.md /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /.github/comments/invalid-link.md /code/renderers/server/template/cli/button.stories.json /code/frameworks/angular/src/builders/build-storybook/schema.json /code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /test-storybooks/external-docs/.storybook /code/lib/cli/src/automigrate/fixes/vta.ts /code/addons/onboarding/CHANGELOG.md /code/core/src/manager/components/sidebar/Brand.tsx /docs/_snippets/storybook-main-disable-addon.md /code/lib/cli/src/automigrate/fixes/sb-binary.ts /docs/_snippets/storybook-main-js-md-files.md /code/core/src/server-errors.ts /code/lib/cli/src/automigrate/fixes/cra5.ts /code/addons/docs/template/stories/docspage /code/addons/backgrounds/template/stories/parameters.stories.ts /code/core/src/telemetry/storybook-metadata.test.ts /code/lib/cli/src/automigrate/fixes/addon-postcss.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)