fineui-custom-theme
Installation
SKILL.md
创建 FineUI 自定义主题
交付能够被真实应用加载的主题文件。先检查当前应用的静态资源目录、已有主题和生成器,再决定如何改配色;不要要求用户获取 FineUI 框架源码。
工作流程
- 确定风格与范围。 尊重用户给定的配色;没有指定时,对照已有主题提出一个明确方案,说明内容背景、正文、强调色、选中态和圆角。不要把本技能附带的示例配色当作固定要求。
- 定位应用目录。 Pro 是
res/themes/;Core 是wwwroot/res/themes/;Java 是src/main/resources/static/res/themes/;纯 F.js 示例是res/themes/。以项目实际目录为准。 - 新建主题。 名称用小写英文、数字和下划线或短横线,如
plum_mint。保留已有目录,复制本项目的custom_default/theme.config或合适的主题配置,再修改六组基础状态和派生项。完整示例见 assets/plum_mint/theme.config,可选原生深色外观见 assets/plum_mint/theme-extra.css。 - 生成样式。 在应用的
res/themes对应目录执行node generate-theme.mjs 主题名。核对实际生成的文件;生成失败时保留原文件并检查路径和配置。需要边改边预览时用node generate-theme.mjs --watch 主题名,或双击生成并监听主题.bat。监听只负责生成,浏览器仍需刷新。 - 接入应用。 按 references/integration.md 的栈差异设置自定义主题。优先使用现有主题初始化入口,避免新增重复的 PageManager 或初始化器。检查旧
ThemeCookie 是否覆盖配置。 - 运行与验证。 启动真实示例,确认主题样式请求成功、计算样式匹配配置;测试表格选中/取消、表单焦点与校验、下拉浮层、日期面板、主按钮、消息框。截图前等待页面渲染完成,按钮文字必须完整;有 iframe 时分别检查父页与子页。不能运行的项目如实说明,不能用静态拼图代替运行验证。
- 交付。 保留
theme.config、生成的theme.css,以及存在时的theme-extra.css和图片。用户要求下载时,打包为单个主题目录并附中文安装说明;不要夹带框架 DLL/JAR、私有源码或整个示例工程。解压后再生成一次并比较样式,确认下载包可复用。