基数 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 



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

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

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

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173289680195737.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Radix UI Replace Radix Color with Custom Palette"> </p>

<p>グレーについても同じことを行います。<br>
</p>

<pre class="brush:php;toolbar:false">theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },

---

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

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

<theme accentcolor="blue" graycolor="gray">
  <navbar></navbar>
  <main>{children}</main>
  <footer></footer>
</theme>

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

---

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

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

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