Storybook 7中dark-mode插件首次加载主题不生效问题求助

针对你遇到的首次加载/刷新后主题不生效、仅点击故事后可切换的问题，结合Storybook 7.0.0-rc.1和storybook-dark-mode v2.1.1的适配情况，给你几个可行的修复方案：

方案1：替换配置项current为initial #

部分适配Storybook 7的插件版本已将初始主题配置从current改为initial，修改你的preview.tsx配置：

parameters: {
  darkMode: {
    light: lightTheme,
    dark: darkTheme,
    initial: "light", // 替换原有的current为initial
    stylePreview: true
  },
  // 其他参数保持不变
}

方案2：手动触发初始主题应用 #

利用Storybook的addons API在预览初始化时强制设置主题，在preview.tsx中添加以下代码：

import { addons } from '@storybook/preview-api';

// 放在parameters导出之前
const darkModeAddon = addons.getAddon('storybook-dark-mode');
if (darkModeAddon) {
  // 强制设置初始为light主题
  darkModeAddon.setCurrent('light');
}

// 你的parameters配置...
export const parameters = { /* 原配置 */ };

方案3：升级插件到适配Storybook 7的版本 #

storybook-dark-mode v2.1.1发布时Storybook 7还处于RC阶段，兼容性可能不足。建议升级到支持v7的版本，执行：

npm install storybook-dark-mode@latest --save-dev

升级后再测试初始主题是否正常生效。

方案4：清除Storybook缓存 #

缓存可能导致配置不生效，执行以下命令清除缓存后重启Storybook：

npx storybook@next clean
npm run storybook

内容的提问来源于stack exchange，提问作者Samu R