自訂主題

如前幾節所述，NextUI 提供兩個預先定義的主題，light 和 dark。這些主題本身就具有彈性，讓您可以根據您的特定偏好或專案需求進行調整。

此外，您還可以選擇基於預設主題建立自己的主題。每個主題都包含了 Layout（佈局） 樣式值和 Color（顏色） 樣式值，旨在協助您進行客製化流程。

客製化佈局

您可以修改各種佈局方面，包括間距單位、字體大小、行高、圓角等等。

佈局樣式值可以全域套用至所有主題，或者僅套用至選定的主題。

全域佈局客製化

假設您需要所有主題都具有較小的邊框圓角、較細的邊框寬度，以及更不透明的禁用元素。您可以透過將以下程式碼新增到您的 tailwind.config.js 檔案中來實現這些變更。

由於 NextUI 元件使用佈局樣式值，因此修改將反映在使用這些樣式值的所有元件中。例如，Button（按鈕） 元件使用 radius 樣式值設定邊框圓角，並使用 borderWidth 樣式值定義變體為 bordered 時的邊框寬度。

現在讓我們看看變更後 Button（按鈕） 元件的外觀。

請參閱 Layout（佈局） 章節，以了解有關可用樣式值的更多詳細資訊。

客製化顏色

現在，假設您想要修改深色主題的主要和焦點顏色。這可以透過將以下程式碼新增到您的 tailwind.config.js 檔案中來實現。

此修改將影響所有使用 primary 顏色的元件。例如，Button（按鈕） 元件在變體為 solid 或 ghost 時，使用 primary 顏色作為背景顏色。

🎉 就是這樣！您已成功客製化預設主題。請參閱 Colors（顏色） 章節，以了解有關可用語義顏色和顏色樣式值的更多詳細資訊。