SuperAPI AI 工具集

igniteui-blazor-theming

通用与其它

查看项目

更新于 10-16 06:17

技能介绍

用途:为 Ignite UI for Blazor 应用做主题与视觉定制,采用 CSS 优先方式,通过内置主题 CSS 文件、CSS 自定义属性、CSS shadow parts 和 Ignite UI Theming MCP 服务器实现。

主要能力:1) 内置主题:Bootstrap、Material、Fluent、Indigo,各有明暗变体,同一时间只应启用一个主题 CSS 文件。2) 调色板:用 create_palette(platform: "blazor", output: "css", ...) 从种子色生成,需显式控制各色阶时用 create_custom_palette;调色板 CSS 放 :root,并在内置主题 CSS 之后加载;可用 get_color 获取颜色引用,contrast: true 取对应文字色。明暗变体需注意 surface 与 variant 匹配,色阶 50 最浅、900 最深,暗色仅反转灰色。3) 组件级主题:先调 get_component_design_tokens(component: "..."),再用 create_component_theme(platform: "blazor", component: "...", tokens: {...}, output: "css") 或按返回的 token 名写 CSS,参数是 tokens 而非 overrides;有变体的组件应指定精确变体如 contained-button、flat-button、outlined-button、fab-button;调色板建立后使用 var(--ig-primary-500) 这类引用。4) CSS parts:需先用 get_doc 确认组件是否暴露 ::part() 及确切名称。5) 布局:set_roundness(radiusFactor 0..1)、set_spacing(spacing 数值,可选 inline/block)、set_size(size),不要用 compact、cosy、comfortable 等旧名称。

使用方式:前置条件为使用 Ignite UI for Blazor 组件的 Blazor 项目、主题 CSS 文件与 _content/IgniteUI.Blazor/app.bundle.js 运行时脚本、以及 igniteui-theming MCP 服务器。工作流为 read_resource 校验上下文、生成调色板、定制组件、调整布局 token、应用生成的 CSS(置于内置主题 CSS 之后)。

限制:切勿凭记忆写 CSS 变量名、token 名或调色板颜色;不要用 create_theme 处理 Blazor(其输出 Sass,需要编译步骤);调色板与组件主题 token 不得传原始色值除非有意脱离主题;生成或更新样式文件时不得直接覆盖已有文件,应以 diff 或建议形式让用户确认;.razor.css 隔离文件中需为 igc-* 选择器加前缀。

具体文件路径、MCP 配置细节和预设值需查阅资料中的参考文件,此处暂未完整提供。