テーマのカスタマイズ

前のセクションで概説したように、NextUIはlightとdarkの2つの事前定義されたテーマを提供しています。これらのテーマは本質的に柔軟性があり、特定の好みやプロジェクトのニーズに合わせて調整できます。

さらに、デフォルトのテーマに基づいて独自のテーマを作成することもできます。各テーマには、カスタマイズプロセスを容易にするように設計されたレイアウトトークンとカラートークンが組み込まれています。

レイアウトのカスタマイズ

間隔単位、フォントサイズ、行の高さ、半径など、さまざまなレイアウトの側面を変更できます。

レイアウトトークンは、すべてのテーマにグローバルに適用することも、選択したテーマに個別に適用することもできます。

グローバルレイアウトのカスタマイズ

すべてのテーマで、より小さなボーダー半径、より細いボーダー幅、およびより不透明な無効要素が必要だと仮定します。これらの変更を実装するには、次のコードをtailwind.config.jsファイルに追加します。

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    nextui({
      layout: {
        disabledOpacity: "0.3", // opacity-[0.3]
        radius: {
          small: "2px", // rounded-small
          medium: "4px", // rounded-medium
          large: "6px", // rounded-large
        },
        borderWidth: {
          small: "1px", // border-small
          medium: "1px", // border-medium
          large: "2px", // border-large
        },
      },
      themes: {
        light: {},
        dark: {},
      },
    }),
  ],
};

NextUIコンポーネントはレイアウトトークンを使用するため、変更はそれらを利用するすべてのコンポーネントに反映されます。たとえば、Buttonコンポーネントは、ボーダー半径を設定するためにradiusトークンを使用し、バリアントがborderedの場合にボーダー幅を定義するためにborderWidthトークンを使用します。

それでは、変更後のButtonコンポーネントがどのように見えるかを見てみましょう。

import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="bordered" radius="md">
        Button
      </Button>
      <Button isDisabled color="primary" radius="md">
        Disabled
      </Button>
    </div>
  );
}

利用可能なトークンの詳細については、レイアウトセクションを参照してください。

色のカスタマイズ

次に、ダークテーマのプライマリカラーとフォーカスカラーを変更したいとしましょう。これは、tailwind.config.js ファイルに以下のコードを追加することで実現できます。

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    nextui({
      themes: {
        dark: {
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },
    }),
  ],
};

この変更は、primary カラーを使用するすべてのコンポーネントに影響します。たとえば、Button コンポーネントは、バリアントが solid または ghost の場合に、背景色として primary カラーを使用します。

import {Button} from "@nextui-org/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button color="primary" variant="solid">Solid</Button>
      <Button color="primary" variant="ghost">Ghost</Button>
    </div>
  );
}

🎉 これで完了です！デフォルトテーマのカスタマイズに成功しました。利用可能なセマンティックカラーとカラートークンに関する詳細は、色のセクションをご覧ください。