Ignite UI Theming MCP Server

Ignite UI Theming - 来自 Infragistics

Ignite UI Theming 仓库收集了一组 Sass 混入、函数和变量，用于为 Infragistics 构建的各种 UI 框架创建主题。这个主题包能让你轻松为项目创建调色板、阴影层级和排版样式。

仓库结构

这是一个采用 npm workspaces 的 monorepo，包含两个包：

igniteui-theming 包是唯一发布的产物，包含 Sass 主题库和 MCP 服务二进制文件。

MCP 服务也以 io.github.IgniteUI/igniteui-theming 的名称列在 MCP Registry 中。仓库根目录下的 server.json 是其注册清单，会在发布时自动发布。

在仓库根目录运行的常用命令：

npm install    # install all workspace dependencies
npm run build  # build theming + MCP in dependency order
npm test       # run all tests across both packages
npm run lint   # lint all packages

调色板

我们提供四种预定义调色板：material、bootstrap、fluent 和 indigo。它们包含所有必要的颜色及其不同变体，让你更轻松地为具体场景选择合适的颜色。效果如下：

若要使用调色板中的任意颜色，可以使用 color 函数：

background: color($light-material-palette, 'primary', 500);

如需进一步了解该包包含哪些颜色函数和混入，以及如何使用它们，请参阅 颜色 Wiki 页面

排版

主题包中的另一个实用模块是排版，它能帮助你在整个项目中保持一致的排版风格。我们同样为开箱即用的四种主题提供了四种排版预设。

你可以使用 typography 混入设置任意字体，该混入接受两个参数（字体系列和字号比例）。默认情况下，排版使用 material 字体系列和字号比例。

@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

如需了解该包中的排版模块，请参阅 排版 Wiki 页面

阴影层级

主题包提供了一组预设阴影，可用于提升组件的视觉层次。它们非常适合用于按钮、卡片、导航栏等。

你可以使用 elevation 函数设置 0-24 级阴影，该函数接受阴影级别作为参数：

box-shadow: elevation(12);

如需了解有关阴影层级及其功能的更多信息，请参阅 阴影层级 Wiki 页面

用法

若要在应用程序中使用 Ignite UI Theming，需要安装 igniteui-theming 包：

npm install igniteui-theming

接下来，在所需文件中像这样 使用 它：

@use '.../node_modules/igniteui-theming/' as *;

你也可以只 使用 该包的一部分：

@use '.../node_modules/igniteui-theming/sass/color' as *;

我们为 material、bootstrap、fluent 和 indigo 主题提供颜色（浅色和深色调色板）、排版和阴影层级的预设。你可以像这样将它们导入 SCSS 文件：

@use '.../node_modules/igniteui-theming/sass/typography/presets' as *;

如需了解该包包含的内容，请参阅 Wiki 页面

代码检查与测试

扫描项目中的代码检查错误，请运行

npm run lint

运行测试套件，请运行

npm run test

测试与调试

预览调色板

在 packages/theming 目录下运行。传入调色板（material、bootstrap、fluent、indigo）和变体（light 或 dark）。

npm run preview:palette -- --palette=material --variant=light

MCP 服务（AI 辅助主题设置）

Ignite UI Theming 包含一个 模型上下文协议（MCP） 服务，可让 AI 助手为你的 Ignite UI 应用生成可用于生产环境的主题代码。此 MCP 服务是 Ignite UI 更大型的AI 辅助开发工具链的一部分。

什么是 MCP？

模型上下文协议允许 AI 助手（如 Claude、GitHub Copilot 等）连接外部工具和数据源。Ignite UI Theming MCP 服务可作为专业的主题设置助手，帮助你：

• 🎨 生成颜色调色板，并自动创建不同深浅的色阶
• 📝 创建符合设计标准的排版系统
• 🌓 构建适用于浅色和深色模式的完整主题
• 🎯 使用设计令牌自定义组件
• ✅ 验证颜色是否符合无障碍规范

快速开始

大多数用户无需克隆任何内容。该服务包含在已发布的 igniteui-theming 包中，并在 MCP Registry 中列为 io.github.IgniteUI/igniteui-theming——支持通过 Registry 安装的客户端可以使用该名称添加服务，其他客户端则使用下方的 npx 配置。

如需从源代码运行：

1. 克隆并构建

克隆代码仓库并进行构建：

npm install
npm run build

2. 配置 AI 客户端

该 MCP 服务适用于任何兼容 MCP 的客户端。以下是常用客户端的设置说明：

{
  "servers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

它能做什么？

🎨 创建完整主题

只需向 AI 助手描述你的主题：

“为我的 Angular 应用创建一个 Material Design 深色主题，并从 Gruvbox 配色方案中汲取灵感。”

AI 将生成可用于生产环境的 Sass 代码，其中包含：

• 包含所有深浅色阶的颜色调色板
• 采用合适字体比例的排版设置
• 阴影层级
• 特定于平台的导入项和配置

🌈 生成颜色调色板

“生成一个浅色主题调色板，以青绿色为主色，以紫色为辅助色。”

获取符合设计系统标准、计算精准的颜色色阶。

📝 设置排版

“为 Web Components 设置排版，使用 Inter 字体和 Material Design 字体比例。”

获取包含字体系列和响应式字体比例的合适排版配置。

🎯 自定义组件

“按钮组件有哪些可用的设计令牌？”

“创建一个紫色背景、白色文字的扁平按钮主题”

使用设计令牌探索并自定义单个组件的样式。

可用功能

MCP 服务提供 8 个工具和 16 个资源：

工具（操作）

资源（参考数据）

• 平台信息：Angular、Web Components、React 和 Blazor 的配置
• 预设库：预先构建的调色板、字体排版和阴影集
• 颜色指南：颜色选择和使用的最佳实践
• 设计系统架构：Material、Bootstrap、Fluent 和 Indigo 配置

支持的平台

• Angular - igniteui-angular
• Web Components - igniteui-webcomponents
• React - igniteui-react
• Blazor - igniteui-blazor

交互示例

完整文档

详细文档包括：

• 完整的工具参数参考
• 所有提示词示例
• 特定平台的差异
• 故障排除指南
• 开发说明

请参阅 MCP 服务 README

开发脚本

# Build for production (theming + MCP)
npm run build

# Run tests
npm run test

# Debug with MCP Inspector (from packages/mcp)
npm run inspect

贡献

欢迎贡献！请随时提交 Pull Request。