用途:为 Ignite UI for Angular 应用生成与定制主题,基于 Sass 主题系统与 Ignite UI Theming MCP 服务器,涵盖全局主题、调色板、字体排印、阴影层级、组件级主题及布局控件(间距、尺寸、圆角)。
前提:Angular 项目已安装 igniteui-angular(授权用户为 @infragistics/igniteui-angular);项目启用 Sass 支持;需 Ignite UI Theming MCP 服务器。
主要能力:主题体系由调色板、字体排印、阴影层级和 schema 组成,内置 Material、Bootstrap、Fluent、Indigo 四套设计系统,各含明暗变体。可直接在 angular.json 中引入预构建 CSS,例如 node_modules/igniteui-angular/styles/igniteui-angular.css。也可用 Sass 手动构建:@use 'igniteui-angular/theming' as *; 通过 palette()、typography()、core()、theme() 组合。组件级主题使用组件主题函数与 tokens 混入,颜色须使用调色板令牌。
使用方式:先调用 detect_platform 验证服务器并确定导入路径;若工具不可用,从项目根目录运行 npx -y igniteui-cli ai-config(或全局安装后 ig ai-config)配置。随后可调用 create_theme、create_palette、create_component_theme、get_component_design_tokens、get_color 等工具生成代码;组件主题前须先用 get_component_design_tokens 获取有效令牌名。调色板生成后不得硬编码颜色,须使用 var(--ig-<family>-<shade>) 令牌。布局通过 --ig-size、--ig-spacing、--ig-radius-factor 控制。
限制:需 MCP 服务器,加载后需重载编辑器或智能体会话;调色板色阶 50 最浅、900 最深,暗色主题不得反转;Surface 颜色须匹配明暗变体;不替换用户已有样式文件,仅做定向编辑;复合组件需逐个子组件设置主题;资料未提供具体收费与价格信息。