Storybook 擴充功能色彩配置

以指定的色彩配置預覽並渲染你的 Story

安裝

首先，安裝套件。

npm install --save-dev storybook-addon-color-scheme

然後，將其註冊為 .storybook/main.js 中的擴充功能。

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-color-scheme', // 👈 register the addon here
  ],
};

export default config;

使用方式

使用此擴充功能的主要方式是定義 colorScheme 參數。你可以在元件層級執行此操作（如下所示），以影響檔案中的所有 Story，或者你可以針對單一 Story 執行此操作。

// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    colorScheme: "dark",
  },
};

export default meta;