描述bug

Hi @shilman,我正在使用Storybook V8.0.10和storybook-dark-mode v4.0.0。
以下是当前的情况：在清除缓存后首次导航到一个故事时，屏幕会在深色模式和浅色模式之间 Flink 。然而，如果我之前访问过那个特定的故事，这种 Flink 行为就不会发生。
未命名_.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;

重现链接

N/A

重现步骤

• 无响应*

系统

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

其他上下文

• 无响应*