基数 UI 基数カラーをカスタム パレットに置き換える

私が取り組んでいる新しい Next.js プロジェクトでは、スタイリングに Tailwind CSS と Radix UI を選択しました。 Radix UI は、開発者が独自のアクセント カラーとグレー カラーを定義できるカスタム パレット ツールを提供します。ただし、ドキュメント全体を検索しましたが、カスタム カラーを実装する効果的な方法が見つかりませんでした。

グーグル検索を開始したところ、このタスクを達成するためのガイドとなるブログを見つけました。私がとった手順は次のとおりです:

ステップ 1. カスタム カラー スケールをコピーして global.css ファイルに貼り付けます

アクセントとグレーに必要な色の 16 進数コードを指定し、[アクセント スケールをコピー] をクリックします。

コピーした内容を glabal.css ファイルに貼り付けます。

[グレー スケールをコピー] を使用して、グレー スケールに対しても同じ操作を行います。

ステップ 2. tailwind.config.ts のコードを変更します

このコードをファイルに追加します。 JavaScript を使用する場合は、ブログのコードを使用します。 TypeScript を使用しているため、コードにいくつかの入力が追加されています。

function getColorScale(name: string): { [key: string]: string } {
  // eslint-disable-next-line prefer-const
  let scale: { [key: string]: string } = {};
  for (let i = 1; i <= 12; i++) {
    // Add the color variable to the scale
    scale[i.toString()] = `var(--${name}-${i})`;
    // Add alpha color variable to the scale
    scale[`a${i}`] = `var(--${name}-a${i})`;
  }

  return scale;
}

このコードは、global.css ファイルからカラー スケールを取得し、それを tailwind CSS がカラーのカスタマイズで使用する形式に変換します。

次に、テーマオブジェクトの下にある色オブジェクトを変更します。

この例では、アクセント カラー スケールのカラー カテゴリは青なので、getColorScale を呼び出すときに引数として青を指定するだけです。

グレーについても同じことを行います。

theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },

ステップ 3.layout.tsx ファイルを更新します

デフォルトでは、acccentColor は青に設定され、grayColor はグレーに設定されているため、この例では、カラー スケールは自動的に更新されますが、カラー カテゴリが別の色、たとえばオレンジの場合は、アクセントカラーをオレンジに更新します。

<Theme accentColor='blue' grayColor='gray'>
  <NavBar />
  <main>{children}</main>
  <Footer />
</Theme>

青のカラー スケールが再定義されたため、Radix UI のテーマ コンポーネントはカスタム カラー スケールを使用してコンポーネントのスタイルを設定するようになります。

これは、すべてのコンポーネントを再定義せずに、Web サイトにカスタム カラー スケールを適用する方法です。

どうやってカスタマイズしますか?

以上が基数 UI 基数カラーをカスタム パレットに置き換えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。