# @claudebernard/storybook-addon-theme-switcher 中文文档

规范地址：https://npmcn.com/package/%40claudebernard/storybook-addon-theme-switcher/

版本：0\.1\.0
npm 元数据更新时间：2026-01-13T11:10:14.046Z
中文译文更新时间：2026-11-10T00:12:21.890Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40claudebernard/storybook-addon-theme-switcher
原文对照：https://npmcn.com/package/%40claudebernard/storybook-addon-theme-switcher/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.3 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：storybook ^10\.0\.5，@storybook/icons ^1\.6\.0，@storybook/addon-a11y ^10\.0\.5，@storybook/addon-links ^10\.0\.5，@storybook/web-components ^10\.0\.5
- 首次发布：2025-07-17T17:52:36.014Z
- 最新版本发布：2025-11-06T16:27:52.930Z
- 近 30 天下载量：3361（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

在 CSS 主题之间切换的故事书附加

## 安装

```sh
npm install @claudebernard/storybook-addon-theme-switcher
```

也可以使用：`pnpm add @claudebernard/storybook-addon-theme-switcher`、`yarn add @claudebernard/storybook-addon-theme-switcher`、`bun add @claudebernard/storybook-addon-theme-switcher`

## README

# @claudebernard/故事本-addon-主题切换器

(原始内容存档于2018-10-12) (英语). Un addon Storybook qui permet de basculer entre différents thèmes CSS dans vos stories.

## Fonctionnalités (英语:Fonctionnalités) (英语)

-   巴斯克勒企业加工厂
-   \* 装腔作势
-   Léger和类型安全
-   \* \* 配置人性化

## 安装

```bash
npm install @claudebernard/storybook-addon-theme-switcher
```

## 故事书

### (原始内容存档于2017-09-26). Étape 1: Enregistrer l'addon

丹斯・沃特尔・费希尔 `.storybook/main.ts` (单位:千美元) `.storybook/main.js`),"ajoutez l'addon à la liste des addons":"(英语:

```typescript
import type { StorybookConfig } from "@storybook/web-components";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@claudebernard/storybook-addon-theme-switcher" // Ajoutez cette ligne
  ],
  framework: {
    name: "@storybook/web-components",
    options: {},
  },
};

export default config;
```

### Étape 2: 配置器 les thèmes dans 预览.ts

**选项 1 : Utiliser le fichier 预览.ts de l'addon(重指挥)**

Vous pouvez 进口商的配置预览 :

```typescript
import type { Preview } from "@storybook/web-components";
import { decorators, globalTypes, parameters } from "@claudebernard/storybook-addon-theme-switcher/preview";

// Définissez vos thèmes CSS
const lightTheme = `
  :root {
    --primary-color: #007bff;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const darkTheme = `
  :root {
    --primary-color: #4dabf7;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const preview: Preview = {
  decorators,
  globalTypes,
  parameters: {
    ...parameters,
    themeSwitcher: {
      themes: {
        light: lightTheme,
        dark: darkTheme,
      },
      defaultTheme: 'light',
    },
  },
};

export default preview;
```

**备选办法2:配置**

丹斯・沃特尔・费希尔 `.storybook/preview.ts`, 配置 :

```typescript
import type { Preview } from "@storybook/web-components";
import { withThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

// Définissez vos thèmes CSS
const lightTheme = `
  :root {
    --primary-color: #007bff;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const darkTheme = `
  :root {
    --primary-color: #4dabf7;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

const blueTheme = `
  :root {
    --primary-color: #0066cc;
    --background-color: #f0f8ff;
    --text-color: #003366;
    --border-color: #b3d9ff;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

// Configuration des thèmes
const themes = {
  'Clair': lightTheme,
  'Sombre': darkTheme,
  'Bleu': blueTheme,
};

const preview: Preview = {
  parameters: {
    // Configuration de l'addon theme-switcher
    themeSwitcher: {
      themes,
      defaultTheme: 'Clair'
    },
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  // Ajoutez le décorateur
  decorators: [withThemeSwitcher],
  // Déclaration du global type
  globalTypes: {
    themeSwitcher: {}
  },
};

export default preview;
```

### 3号机车:CSS外接装置

Si vous préférez user des fichiers CSS séparés : 互联网档案馆的存檔,存档日期2013-12-02

```typescript
// .storybook/preview.ts
import type { Preview } from "@storybook/web-components";
import { withThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

// Importez vos fichiers CSS comme des chaînes de caractères
// Note: Vous devrez peut-être configurer votre bundler pour importer les CSS comme du texte
import lightThemeCSS from './themes/light.css?inline';
import darkThemeCSS from './themes/dark.css?inline';

const themes = {
  'Thème Clair': lightThemeCSS,
  'Thème Sombre': darkThemeCSS,
};

const preview: Preview = {
  parameters: {
    themeSwitcher: {
      themes,
      defaultTheme: 'Thème Clair'
    },
  },
  decorators: [withThemeSwitcher],
  globalTypes: {
    themeSwitcher: {}
  },
};

export default preview;
```

### 第4节:选择权

(原始内容存档于2013-10-12). Si vous préférez enregistrer l'addon manuellement, Créez un fichier `.storybook/manager.ts` 数字 :

```typescript
import { registerThemeSwitcher } from "@claudebernard/storybook-addon-theme-switcher";

registerThemeSwitcher();
```

## 高级配置

### 帕拉梅特尔不负责任

```typescript
interface ThemeSwitcherParameters {
  themes: Record<string, string>;    // Nom du thème -> CSS
  defaultTheme: string;              // Nom du thème par défaut
}
```

### CSS 变量

```typescript
const themes = {
  'Corporate': `
    :root {
      --primary: #0066cc;
      --secondary: #6c757d;
      --success: #28a745;
      --danger: #dc3545;
      --warning: #ffc107;
      --info: #17a2b8;
      --light: #f8f9fa;
      --dark: #343a40;
    }
  `,
  'Creative': `
    :root {
      --primary: #ff6b6b;
      --secondary: #4ecdc4;
      --success: #45b7d1;
      --danger: #f9ca24;
      --warning: #f0932b;
      --info: #6c5ce7;
      --light: #ddd;
      --dark: #2d3436;
    }
  `,
};
```

## 利用故事

(原始内容存档于2018-07-25). Une fois configuré, l'addon apparaîtra dans la barre d'outils de Storybook avec une icône de pinceau. Vous sourrez : (英语:

1.  《小菜一碟》
2.  名单
3.  Voir le changement appliqué immédiatement à votre 故事

## 发展

### 建筑业

```bash
npm run build
```

### 发展模式

```bash
npm run dev
```

### 类型核查

```bash
npm run type-check
```

## 协调

-   故事书 8.6.11
-   反应 18+
-   类型脚本 5+

## 许可证

麻省理工学院

## 常见问题

### @claudebernard/storybook-addon-theme-switcher 是什么？

在 CSS 主题之间切换的故事书附加

### 如何安装 @claudebernard/storybook-addon-theme-switcher？

在项目目录运行 npm install @claudebernard/storybook-addon-theme-switcher，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：storybook（^10\.0\.5）、@storybook/icons（^1\.6\.0）、@storybook/addon-a11y（^10\.0\.5）、@storybook/addon-links（^10\.0\.5）、@storybook/web-components（^10\.0\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @claudebernard/storybook-addon-theme-switcher 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @claudebernard/storybook-addon-theme-switcher 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @claudebernard/storybook-addon-theme-switcher 可以商用吗？

@claudebernard/storybook-addon-theme-switcher 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @claudebernard/storybook-addon-theme-switcher 的下载量有多少？

根据 npm 官方下载统计，@claudebernard/storybook-addon-theme-switcher 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,361 次，日均约 112 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @claudebernard/storybook-addon-theme-switcher 还在维护吗？

最新版本 0\.1\.0 发布于 2025/11/07（1 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/07/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。