🧑‍🍳

Storybookの見た目をカスタマイズする

2023/12/10に公開

Storybook

tech

Storybook公式のtheming APIを使用したカスタマイズを紹介します。
ふだんStorybookのロゴ画像が表示されているエリアや、サイドナビ、タブバーなどの配色のカスタマイズができるようになります。

準備

カスタマイズに必要なパッケージをインストールします。
※本記事の検証バージョンはv7.6.4です。
※事前にStorybookはインストール済みとします。

npm install --save-dev @storybook/manager-api @storybook/theming

実践

ドキュメントを見ながら試していきます。

ダークテーマを適用

デフォルトではライトテーマが適用された状態ですが、Storybookではダークテーマも用意されているようです。
.storybook/manager.tsを作成し、以下のように記述することで簡単に適用ができました。

.storybook/manager.ts

import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

Storybookへダークテーマを適用した状態のキャプチャ

Docsもダークテーマにする

ちなみに、Docsは独立しているらしく上記の設定だけではテーマは切り替わらないため、Docsへもダークテーマを適用したい場合は、preview.tsへ記述を追加します。

.storybook/preview.ts

import { Preview } from '@storybook/your-framework';

import { themes } from '@storybook/theming';

const preview: Preview = {
  parameters: {
    docs: { // Docsのテーマ設定
      theme: themes.dark,
    },
  },
};

export default preview;

すると、Docsの見た目もダークテーマになります。
StorybookのDocsにもダークテーマが適用されている状態のキャプチャ

自分でテーマを作る

さらに、自作のテーマを使ってStorybookロゴ部分を他の画像にしたり、フォントやUIパーツの色を部分的に調整することができます。

変化のわかりやすさ重視で極端なサンプルですが、このように変えることもできます。
Storybookの見た目をカスタマイズした状態のキャプチャへ設定項目名を示した図解

設定内容（コード）

実際の設定内容は以下です。
CustomThemeは任意の名称でOKです。

.storybook/CustomTheme.ts

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',
  // フォント
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // 左上のStorybookのロゴが入っていたエリア
  brandTitle: 'My custom Storybook', // imgタグのalt属性に反映される
  brandUrl: 'https://example.com', // imgをクリックした場合の遷移先
  brandImage: 'https://placehold.jp/3d4070/ffffff/300x300.png', // 左上の画像
  brandTarget: '_self', // 遷移の仕方。aタグのtarget属性に反映される

  // カラー
  colorSecondary: 'lightsalmon',

  // UI
  appBg: 'mistyrose', // サイドナビ背景
  appContentBg: 'gold', // 下部のタブパネルエリア背景
  appPreviewBg: 'whitesmoke', // プレビューエリア背景
  appBorderColor: 'white', // ボーダーカラー
  appBorderRadius: 20, // 角丸

  // テキストカラー
  textColor: 'black',
  textInverseColor: 'white',

  // ツールバー（下部のタブパネル）
  barTextColor: 'darkblue', // タブタイトルテキスト
  barSelectedColor: 'seagreen', // 選択中のタブ
  barHoverColor: 'orange', // タブホバー中の下線
  barBg: 'skyblue', // タブバーの背景

  // フォームカラー
  inputBg: 'lightsalmon', // input背景
  inputBorder: 'purple', // inputボーダー
  inputTextColor: 'salmon', // inputテキスト
  inputBorderRadius: 9999, // inputの角丸
});

また、カスタマイズしたthemeを使用するにはmanager.tsで読み込みます。

.storybook/manager.ts

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

import CustomTheme from "./CustomTheme";

addons.setConfig({
  theme: CustomTheme,
});

おわりに

紹介したものがすべての設定項目ではありませんが、カスタマイズしていくことで例えばUIカタログとしてStorybookを使う場合に、ブランドの世界観を表現することができるのではないかと思います。

Storybookの公式サイト下部「Made for frontend developers」のセクションでは採用実績が並んでいます。
いずれもプロダクトのロゴを設置したり配色を変更しているので、こちらも参考になりそうです。
https://storybook.js.org/

該当箇所へのリンクはこちら

準備

実践

ダークテーマを適用

Docsもダークテーマにする

自分でテーマを作る

設定内容（コード）

おわりに

Discussion