Radix UI 以自訂調色盤取代 Radix Color

在我正在開發的新 Next.js 專案中，我選擇 Tailwind CSS 和 Radix UI 進行樣式設定。 Radix UI 提供了一個自訂調色板工具，讓開發人員可以定義自己的強​​調色和灰色。然而，我搜尋了整個文檔，並沒有找到實現自訂顏色的有效方法。

我開始谷歌搜索，為了救援，我找到了一個部落格來引導我完成任務。以下是我採取的步驟：

---

步驟 1. 將自訂色階複製並貼上到 global.css 檔案

為「強調色」和「灰色」提供所需顏色的十六進位代碼，然後按一下「複製強調色階」。

將複製的內容貼到 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檔

預設情況下，accentColor 設定為藍色，grayColor 設定為灰色，因此在本例中，色階將自動更新，但如果顏色類別是不同的顏色，例如橙色，那麼您需要將accentColor更新為橙色。

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

由於重新定義了藍色的色標，Radix UI 中的任何主題元件現在都將使用自訂色標來設定元件的樣式。

---

這就是我在網站上應用自訂色階而無需重新定義每個元件的方法。

如何客製化您的？

以上是Radix UI 以自訂調色盤取代 Radix Color的詳細內容。更多資訊請關注PHP中文網其他相關文章！