前言

對於一款成熟的 UI 框架而言，支持自定義主題顏色是必不可少的能力。過去，AXUI 一直專注於功能優化、性能提升和新模塊開發，因此遲遲未推出主題工具。但事實上，在 AXUI 的底層設計階段，我們已經為主題可定製性做好了充分準備：整個框架的主題色均採用 HSLA 模型進行設計。

HSLA 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness）和透明度（Alpha）。與常見的 RGBA 或 HEX 不同，HSLA 更直觀、易理解，用户可以通過調整這四個參數快速得到理想的顏色。

例如：

• hsla(0,100%,50%,0.5) 表示半透明的純紅色。
• 將色相調整為 120°，即可得到綠色：hsla(120,100%,50%,0.5)。
• 將飽和度降低，可以得到更柔和的暗色調：hsla(0,60%,50%,0.5)。
• 增加亮度，顏色會更明快：hsla(0,100%,70%,0.5)。
• 透明度設為 1，即可獲得完全不透明的色值：hsla(0,100%,50%,1)。

這種直觀的調控方式，讓開發者和設計師都能輕鬆理解和應用。

顏色增強機制

僅靠 HSLA 仍不足以支撐一個完整 UI 框架的色彩需求。比如：

• Dark 模式 下需要自動適配顏色變化；
• 組件在不同背景下需要動態調整明暗層次。

為此，AXUI 在 h、s、l、a 四個基礎變量之外，額外引入了 coef 係數。
通過 coef，我們可以靈活適配深色模式和多樣化的主題場景。
這一機制不僅大大提升了框架的長期可維護性，也為用户的主題自定義提供了更強的自由度。

專屬顏色拾取器

支撐主題定製的核心，是 AXUI 自研的 顏色拾取器（Color Picker）。

它不僅具備原生 type=color 的全部功能，還支持：

• 精確編輯：可單獨調整 HSLA 四個通道；
• 格式多樣：支持多種色值表示方式；
• 透明度控制：自由調節 Alpha 通道。

👉 點此查看 AXUI 顏色拾取器演示

通過該拾取器，用户可以實時調整全局主題色的參數值，而無需修改 CSS 變量名，即可完成一鍵換膚。

一鍵生成與下載

AXUI 支持自定義以下多組主題色系：

• prim（主色）
• error（錯誤色）
• suss（成功色）
• info（信息色）
• warn（警告色）
• issue（問題色）
• text（正文色）
• brief（次要文字色）
• caption（輔助説明色）

定義完成後，樣式會自動緩存，並立即全站生效。用户可直接在 axui.cn 上預覽最終效果。若滿意，可通過頁面右下角的 下載按鈕，將定製主題導出為 CSS 文件，直接應用到項目中。

結語

AXUI 的自定義主題顏色工具，讓色彩調控不再是繁瑣的開發工作，而是高效、直觀、可視化的體驗。
無論是設計師追求的視覺統一，還是開發者需要的可維護性，AXUI 都能為你提供最佳支持。

立即嘗試，打造屬於你的專屬 UI 風格！

訪問網址https://axui.cn/list-80-0.php立即體驗