Storybook上でCSSを書き換えてテーマの変更

記事の内容として

デザインシステムなどがあり、色などのデザイントークンぐらいしか変わらない場合がある
今回はshadcn/uiによる複数テーマがある場合、実装側でもStorybook上でテーマを切り替えて確認したい場合の対応例になる
CSSのカスタムプロパティでテーマを変えるものであれば他でも応用できるものになっている

Storybook上のメニューよりCSSを書き換えてStory上の色を確認できるように実装してみた
とはいってもほぼAI実装

解説

動作環境

Storybook

使用しているテーマについて

shadcn/uiの公式にあるテーマのCSS内容をそのまま使用

• 実装したテーマ
  • default
  • green
  • blue

ソース

main.ts

.storybook/main.ts

  staticDirs: ["../dist"],

テーマのCSSを参照できる場所を staticDirs に指定

preview.tsx

特筆することとして

• Previewの拡張のためにpreview.tsではなく preview.tsx にしている
  • StorybookのPreviewでReactの挙動を追加している
    .storybook/preview.tsx

      useEffect(() => {
        switchTheme(theme);
      }, [theme]);
    

• Storybookのメニュー追加
  .storybook/preview.tsx

  globalTypes: {
    theme: {
      name: "Theme",
      description: "Global theme for components",
      defaultValue: "default",
      toolbar: {
        icon: "paintbrush",
        items: [
          {
            value: "default",
            title: "Default Theme",
          },
          {
            value: "green",
            title: "Green Theme",
          },
          {
            value: "blue",
            title: "Blue Theme",
          },
        ],
        showName: true,
        dynamicTitle: true,
      },
    },
  },