@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和类型安全
• * * 配置人性化

安装

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":"(英语:

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 进口商的配置预览 :

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, 配置 :

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

// .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 数字 :

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

registerThemeSwitcher();

高级配置

帕拉梅特尔不负责任

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

CSS 变量

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 故事

发展

建筑业

npm run build

发展模式

npm run dev

类型核查

npm run type-check

协调

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

许可证

麻省理工学院