AXUI前端框架推出全新自定义主题颜色工具

前言

对于一款成熟的 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 风格！

👉 点此体验