用途 该技能用于指导 AI 助手为使用 Ignite UI Web Components（以及通过 igniteui-react 使用的 React 应用）的项目定制主题与样式。它把主题体系拆成四个支柱：调色板（primary、secondary、surface、gray、info、success、warn、error，每个色系含 50–900 色阶）、排版（字体族与字号层级）、阴影（0–24 级 box-shadow）和 schema（把调色板令牌映射到各组件 CSS 自定义属性的组件配方）。内置 Material、Bootstrap、Fluent、Indigo 四套设计系统，每套都有明暗变体。
主要能力
- 预置主题导入：在入口文件导入 igniteui-webcomponents/themes/light/bootstrap.css 等预置 CSS 即可快速换肤；八种导入路径分别对应四套设计系统的明暗主题。若应用只用一套主题，可通过 igc-theme-<name> 打包条件从产物中移除其余三套。
- CSS 自定义属性定制：导入预置主题后，只需覆盖某色系的 *-500 基础色阶，其余 50–900 色阶由 CSS 相对颜色语法自动计算；可在 :root、容器选择器或 .dark-theme 类上覆盖，也可配合 prefers-color-scheme 媒体查询。
- Sass 定制：项目配置 Sass 后可用 @use 'igniteui-theming' 及独立 mixin。create_theme 可一次生成调色板、排版与阴影；create_palette 只生成调色板；create_component_theme 生成组件级主题（含 @include tokens 块）。
- 组件级主题：先用 get_component_design_tokens 查询组件可用的设计令牌，再用 create_component_theme 生成覆盖代码；对 combo、grid、date-picker、select 等复合组件，需按返回的清单为每个子组件分别设置作用域选择器。
- 布局控制：set_size、set_spacing、set_roundness 三个工具可全局或按组件生成 CSS 或 Sass 输出，底层对应 --ig-size、--ig-spacing、--ig-radius-factor 三个 CSS 自定义属性。
- 颜色与参考数据：get_color 把颜色意图解析为 var(--ig-<family>-<shade>) 令牌；read_resource 可读取预置调色板、排版、阴影、颜色角色与规则、平台说明等资源。
使用方式 使用 MCP 工具前必须先调用 detect_platform（读取 package.json 自动识别平台）；若工具不可用，需按 references/mcp-setup.md 自动配置 igniteui-theming MCP 服务器（VS Code、Cursor、Claude Desktop、WebStorm），配置后告知用户可能需要重载编辑器，并等待服务器启动。典型工具顺序为：detect_platform → create_theme → get_component_design_tokens → create_component_theme → create_palette → set_size/set_spacing/set_roundness → get_color。生成或更新主题代码时不得直接覆盖已有样式文件，应以 diff 或建议形式提交给用户审阅确认。
关键规则 调色板生成后，组件主题、自定义 CSS 与 Sass 变量中的颜色一律引用 var(--ig-<family>-<shade>) 令牌，禁止硬编码十六进制、RGB 或 HSL；原始色值只允许出现在初始 palette() 种子调用或 MCP 工具输入中。所有彩色系 50 为最浅、900 为最深，暗色主题下不反转（只有 gray 与 surface 反转）；surface 颜色必须与明暗变体匹配。Web Components 的主题模块是 igniteui-theming，不是 igniteui-angular/theming，Angular 专用的 core()/theme() 组合 mixin 不适用。
适用场景与限制 适用于已安装 igniteui-webcomponents 或 igniteui-react 的项目做主题定制。Sass 方案要求项目已配置 Sass（如 styles.scss 入口、devDependencies 含 sass 或打包器 Sass 插件）；未配置时只能用 CSS 自定义属性方案。MCP 服务器为必需前置条件。该技能未提供具体收费、价格或效果数据。