色彩

NextUI 的外掛程式讓您可以自訂主題的語義色彩，例如 primary、secondary、success 等。

注意：色彩設定會全域套用至所有元件。

預設色彩

NextUI 提供開箱即用的預設調色盤，非常適合您尚未決定特定品牌色彩時使用。

這些色彩分為通用色彩和語義色彩。

• 通用色彩：在主題之間保持一致。
• 語義色彩：根據所選的主題調整。

通用色彩

通用色彩，例如 TailwindCSS 色彩，無論主題為何都保持一致。

為了防止與 TailwindCSS 色彩衝突，通用色彩最初是停用的，但可以使用 addCommonColors 選項啟用。

啟用此選項會以下列色彩補充一些 TailwindCSS 預設色彩

語意色彩

語意色彩會隨著主題調整，傳達意義並強化您的品牌識別。

為了達到有效的調色板，我們建議使用從 50 到 900 的顏色範圍。您可以使用像是 Eva Design System、Smart Watch、Palette 或 Color Box 等工具來產生您的調色板。

語意色彩應放置在 nextui 外掛選項中，而不是 TailwindCSS 主題物件內。

變更文件主題以查看實際的語意色彩。

使用語意色彩

語意色彩可以應用在專案中任何使用到色彩的地方，例如文字顏色、邊框顏色、背景顏色工具等等。

Javascript 變數

將語意色彩和常用色彩匯入您的 JavaScript 檔案中，如下所示

CSS 變數

NextUI 會使用 --prefix-colorname-shade 的格式，為每個語意色彩建立 CSS 變數。預設的前綴是 nextui，但您可以使用 prefix 選項來變更它。

然後您可以在 CSS 檔案中使用 CSS 變數。