前言
对于一款成熟的 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 通道。
通过该拾取器，用户可以实时调整全局主题色的参数值，而无需修改 CSS 变量名，即可完成一键换肤。
一键生成与下载
AXUI 支持自定义以下多组主题色系：
prim（主色）error（错误色）suss（成功色）info（信息色）warn（警告色）issue（问题色）text（正文色）brief（次要文字色）caption（辅助说明色）
定义完成后，样式会自动缓存，并立即全站生效。用户可直接在 axui.cn 上预览最终效果。若满意，可通过页面右下角的 下载按钮，将定制主题导出为 CSS 文件，直接应用到项目中。
结语
AXUI 的自定义主题颜色工具，让色彩调控不再是繁琐的开发工作，而是高效、直观、可视化的体验。
无论是设计师追求的视觉统一，还是开发者需要的可维护性，AXUI 都能为你提供最佳支持。
立即尝试，打造属于你的专属 UI 风格！
👉 点此体验