Ignite UI Theming MCP Server
NPM · IGNITEUI-THEMING · SCANNED SEP 20
Generate Sass palettes, typography, elevations, and themes for Ignite UI components.
Available components
How this component scores in each security and reliability category. Every signal is checked automatically from public evidence about the published package, including repeated runs of it in an isolated sandbox, and we only credit what we can confirm. How we score → Why this is hard to score →
Supply Chain Security99
- No malware found by supply-chain analysis.Pass
- No known CVEs affecting this package version or its production dependencies.Pass
- No install/post-install scripts declared.Pass
- 37 of 148 dependencies flagged as unhealthy. View diagnostics → Partial
Provenance & Transparency97
- Source repository is publicly reachable at the declared URL. View diagnostics → Pass
- Cryptographically verified build provenance (signed, bound to IgniteUI/igniteui-theming). View diagnostics → Pass
- Clear OSI-approved license (MIT).Pass
- Actively maintained (last published 8 days ago).Pass
- Disclosure check failed: no security disclosure policy was found in the source repository. See how to fix → Fail
Schema Quality & AI Usability74
- 100% of prompts and resources have a non-trivial description (not blank, and not just the item's name).Pass
- AI-judged instruction clarity (excellent).Pass
- Context-footprint check failed: tool/resource definitions use about 19941 tokens (~486/item across 41 items; 14 tools + 27 resources), over budget; trim descriptions and params. See how to fix → Fail
- Usage-examples check failed: none of the tools include examples. See how to fix → Fail
Stability & Change Management83
- Stability observed for 25 of 30 days with no destabilising changes; credit accrues until the full window elapses.Partial
Tool Coverage99
- 100% of tools have a non-trivial description (not blank, and not just the tool's name).Pass
- 96% of tool parameters carry a description.Partial
Tool Safety100
- No prompt-injection markers were found in the server instructions, tool names or descriptions we captured.Pass
- We read all 14 captured tool definition(s), and no name or description among them implies an irreversible operation.Pass
- An AI judge read all 15 captured unit(s) of tool text and found none that tries to manipulate the model reading it.Pass
Capabilities100
- Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.Pass
How do I install the Ignite UI Theming MCP Server server?
Ignite UI Theming MCP Server runs locally as an npm package, launched with npx -y igniteui-theming. Ready-made configuration for Claude, Cursor, VS Code, Codex and 5 more is on this page, copied from each client's own documentation.
npm · igniteui-theming
claude mcp add igniteui-igniteui-theming -- npx -y igniteui-theming
{
"mcpServers": {
"igniteui-igniteui-theming": {
"command": "npx",
"args": [
"-y",
"igniteui-theming"
]
}
}
} {
"servers": {
"igniteui-igniteui-theming": {
"command": "npx",
"args": [
"-y",
"igniteui-theming"
]
}
}
} codex mcp add igniteui-igniteui-theming -- npx -y igniteui-theming
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"igniteui-igniteui-theming": {
"type": "local",
"command": [
"npx",
"-y",
"igniteui-theming"
],
"enabled": true
}
}
} openclaw mcp add igniteui-igniteui-theming --command npx --arg -y --arg igniteui-theming
mcp_servers:
igniteui-igniteui-theming:
command: "npx"
args: ["-y", "igniteui-theming"] {
"McpServers": {
"igniteui-igniteui-theming": {
"Transport": "stdio",
"Command": "npx",
"Arguments": [
"-y",
"igniteui-theming"
]
}
}
} assistant mcp add igniteui-igniteui-theming -t stdio -c npx -a -y igniteui-theming
{
"mcpServers": {
"igniteui-igniteui-theming": {
"command": "npx",
"args": [
"-y",
"igniteui-theming"
]
}
}
} Every change we have recorded for this component, newest first. Security-relevant changes are always shown. ▲ marks a change for the better, ▼ a change for the worse; unmarked changes are neutral.
- 19 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 77 to 80. That category is still filling its 30-day observation window: 23 days of observed history at the previous scan, 24 at this one. The score rises as the window fills, whether or not the server changes.
- 17 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 70 to 73. That category is still filling its 30-day observation window: 21 days of observed history at the previous scan, 22 at this one. The score rises as the window fills, whether or not the server changes.
- 15 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 63 to 67. That category is still filling its 30-day observation window: 19 days of observed history at the previous scan, 20 at this one. The score rises as the window fills, whether or not the server changes.
- 13 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 57 to 60. That category is still filling its 30-day observation window: 17 days of observed history at the previous scan, 18 at this one. The score rises as the window fills, whether or not the server changes.
- 12 Sept 26 +15
- Malware scan: unverified → pass ▲ security
- 11 Sept 26 −14
- Malware scan: pass → unverified ▼ security
- Package version: 28.1.1 → 29.0.0 functional
- 9 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 43 to 47. That category is still filling its 30-day observation window: 13 days of observed history at the previous scan, 14 at this one. The score rises as the window fills, whether or not the server changes. Other categories moved too: Schema Quality & AI Usability rose 1.
- 7 Sept 26 +1
No change was recorded against any check on this day. Stability & Change Management went from 37 to 40. That category is still filling its 30-day observation window: 11 days of observed history at the previous scan, 12 at this one. The score rises as the window fills, whether or not the server changes.
Diagnostic detail from the automated scan of this channel: what the scanner observed at each step, so you can see exactly where a check passed or failed. It is informational only and never changes the trust score.
Captured 20 Sept 2026 · Analysed npm/igniteui-theming@29.0.0
Provenance Verified
A signed build attestation was found and verified, binding this exact artifact to the source repository it claims to come from.
| Result | Verified |
|---|---|
| Ecosystem | npm |
| Reason | Verified |
| Discovered via | Registry attestation endpoint |
| Source repo | IgniteUI/igniteui-theming |
| Certificate issuer | https://token.actions.githubusercontent.com |
| Certificate SAN | https://github.com/IgniteUI/igniteui-theming/.github/workflows/npm-publish.yml@refs/tags/v29.0.0 |
| Rekor log index | 2792192108 |
| Predicate type | https://slsa.dev/provenance/v1 |
| Subject digest | sha512:5a9389b3ac57f95286eee3b60ef91bd449a65d50e3faf9d40a79709abe9709f9602afddb6892c30dbddbfc03d630b8cf8200c5c72b2ba60a80afa407b |
Background: How many MCP packages publish verified provenance →
Dependencies 148 packages
| Packages resolved | 148 |
|---|---|
| Stale | 37 |
| Tree resolution | Complete |
Background: SBOMs and build attestations, explained →
The tools this component advertises to a client, with an estimated token cost for each. Expand a tool to see its parameters and schema. The per-tool counts are indicative and are not scored directly; the schema's total context footprint is one signal in Schema Quality & AI Usability. A tool's description is untrusted text the model reads on every call, which is what makes this list a security surface and not just an inventory: how tool poisoning works →
create_component_theme Create Component Theme ~2,331
Generate Sass or CSS code to customize an Ignite UI component's appearance using design tokens. <use_case> Use this tool AFTER calling get_component_design_tokens to customize specific component styles. The generated code can be included in your theme file to override default component appearances. </use_case> <workflow> 1. First call get_component_design_tokens to discover available tokens 2. Choose which tokens to customize based on your design requirements 3. Specify designSystem and variant to match the global theme or the one explicitly requested (defaults to Material light) 4. Call this tool with component name, token values, and output format ("sass" or "css") 5. Receive ready-to-use Sass or CSS code with the component theme </workflow> <important_notes> DESIGN SYSTEM & VARIANT: - designSystem: Choose "material" (default), "bootstrap", "fluent", or "indigo" - variant: Choose "light" (default) or "dark" - The correct schema (e.g., $light-bootstrap-schema, $dark-material-schema) is automatically selected and passed to the component theme function - The correct output: Choose output format based on the target file type (Sass vs CSS) - This ensures component tokens inherit proper defaults from the design system TOKEN VALIDATION: - All provided token names are validated against the component's schema - Invalid tokens return an error with the list of valid token names - You don't need to specify all tokens - only those you want to customize (prefer PRIMARY tokens to minimize the number of overrides) TOKEN VALUE FORMATS: - Colors: Any valid CSS color format (hex, rgb, hsl, named colors) - Dimensions: Include units (e.g., "8px", "0.5rem", "2em") - Border radius: Can be single value or shorthand ("8px" or "8px 8px 0 0") - Shadows: Full box-shadow syntax ("0 2px 4px rgba(0,0,0,0.1)") SELECTORS: - Default selector is auto-detected based on platform and component - For child sub-components (e.g., "list-item",…
| Name | Type | Req | Description |
|---|---|---|---|
| component | string | yes | Component name to theme (e.g., "button", "avatar", "flat-button", "grid"). Must match a valid component from get_component_design_tokens. For button/icon-button variants, use specific names like "fla… |
| designSystem | string | – | Design system preset: "material" (Material Design), "bootstrap" (Bootstrap), "fluent" (Microsoft Fluent), or "indigo" (Infragistics Indigo). Defaults to "material". |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Optional name for the generated theme variable (without $ prefix). If omitted, auto-generates based on component name (e.g., "$custom-button-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | yes | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| selector | string | – | Optional CSS selector to scope the theme. If omitted, uses the platform's default selector for the component. For child sub-components (e.g., "list-item"), the default selector is the parent componen… |
| tokens | object | yes | Object mapping token names to values. Token names must be valid for the component (use get_component_design_tokens to discover them). Values can be CSS colors, dimensions with units, or other Sass-co… |
| variant | string | – | Theme variant: "light" (light backgrounds, dark text) or "dark" (dark backgrounds, light text). Defaults to "light". |
No output schema declared.
No examples provided.
create_custom_palette Create Custom Handmade Palette ~3,524
Generate a custom color palette with fine-grained control over individual shade values. ⚠️ CRITICAL RULES - READ BEFORE GENERATING SHADES: 1. MONOCHROMATIC: Each color (primary, secondary, etc.) must use ONE HUE only. All 14 shades are lighter/darker versions of the SAME color. Example: primary blue → all shades must be blue (#E3F2FD light → #0D47A1 dark). WRONG: mixing blue, green, purple in one color's shades. 2. NEVER INVERT: Chromatic colors always go 50=lightest → 900=darkest. This applies to BOTH light and dark themes. Only gray inverts for dark themes. <use_case> Use this tool when: - The standard palette() function produces suboptimal shade distribution - You have brand guidelines specifying exact color values for each shade - Base colors are too light (luminance > 0.45) or too dark (< 0.05) - You have specific accessibility audit requirements with exact contrast color values (rare - auto-generated contrast is usually sufficient) - You want to mix auto-generated and manually specified color groups </use_case> <output_formats> - "sass" (default): Generates Sass code with palette map structure. Requires Sass compilation. - "css": Generates CSS custom properties (variables) directly. Ready to use in any CSS file. Use "css" output when: - Working with vanilla CSS projects without Sass - You want immediately usable CSS variables - Building prototypes or quick demos - Using CSS-in-JS or other non-Sass styling approaches </output_formats> <workflow> 1. For each color group, choose a mode: - mode:"shades" → Auto-generate all shades from baseColor using shades() function - mode:"explicit" → Manually specify every shade value 2. Validates all explicit shades for: - Completeness: All required shades present - Color format: Valid CSS color values - Luminance progression: 50 lightest → 900 darkest (chromatic colors) - Hue consistency: All shades within ±30° hue tolerance (monochromatic) 3. Ge…
| Name | Type | Req | Description |
|---|---|---|---|
| designSystem | string | – | Design system preset: "material" (Material Design), "bootstrap" (Bootstrap), "fluent" (Microsoft Fluent), or "indigo" (Infragistics Indigo). Defaults to "material". |
| error | – | – | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| gray | – | – | Gray color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 10 shades required: 50, 100,… |
| info | – | – | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| primary | – | yes | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| secondary | – | yes | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| success | – | – | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| surface | – | yes | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
| variant | string | – | Theme variant: "light" (light backgrounds, dark text) or "dark" (dark backgrounds, light text). Defaults to "light". |
| warn | – | – | Color definition object with mode selection: • mode: "shades" + baseColor: Auto-generates all shades from one color • mode: "explicit" + shades: Manually specify all 14 shades required: 50, 100, 200,… |
No output schema declared.
No examples provided.
create_elevations Create Elevations ~737
Set up elevation shadows for Ignite UI themes. <use_case> Use this tool to configure box-shadow values that provide visual depth and hierarchy. Elevations follow Material Design or Indigo design specifications. </use_case> <workflow> 1. Selects elevation preset based on design system parameter 2. Generates Sass code using the elevations() mixin 3. Creates 24 elevation levels (0-24) with corresponding shadow values </workflow> <important_notes> - "material" preset: Material Design 3 shadow specifications - "indigo" preset: Infragistics Indigo shadow specifications - Elevation 0 = no shadow, elevation 24 = maximum shadow depth - Components use elevation() function to apply specific levels SASS FILE PLACEMENT: - When combining Sass output from multiple tools into one file, all @use rules must appear at the top before any other statements. Deduplicate @use lines that share the same module path. </important_notes> <output> Returns: - Generated Sass code with elevations() mixin call - Platform-specific module imports - Variable name used (e.g., $my-elevations) </output> <related_tools> - detect_platform: Run first to get correct platform value - create_theme: Use instead if you want elevations + palette + typography together </related_tools> <related_resources> Call read_resource to load reference data: - "theming://presets/elevations" — elevation presets for Material and Indigo </related_resources>
| Name | Type | Req | Description |
|---|---|---|---|
| designSystem | string | – | Elevation shadow preset: "material" (Material Design shadows) or "indigo" (Infragistics Indigo shadows). Defaults to "material". |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
No output schema declared.
No examples provided.
create_palette Create Color Palette ~3,016
Generate a color palette for Ignite UI themes using the palette() Sass function. <use_case> Use this tool when you have base colors and want to auto-generate a complete palette with all shade variations (50-900, A100-A700). Best for colors with mid-range luminance that will produce good automatic shade distribution. </use_case> <output_formats> - "sass" (default): Generates Sass code using the palette() function. Requires Sass compilation. - "css": Generates CSS custom properties (variables) directly. Ready to use in any CSS file. Use "css" output when: - Working with vanilla CSS projects without Sass - You want immediately usable CSS variables - Using CSS-in-JS or other non-Sass styling approaches </output_formats> <workflow> 1. Validates input colors against the theme variant 2. Analyzes color luminance for shade generation suitability 3. Generates Sass code OR compiles to CSS based on output parameter 4. Adds warning comments to code if issues detected 5. Returns validation warnings and tips in response </workflow> <important_notes> - Requires primary, secondary, and surface colors (matches Sass palette() API) - Gray, info, success, warn, error are optional (use design system defaults) - Surface color should match variant: light colors for "light", dark for "dark" - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation. SHADE PROGRESSION (important): - Primary, secondary, and all chromatic colors: shades are NEVER inverted. The palette() function always generates 50=lightest to 900=darkest. - Only gray shades behave differently based on variant (for text contrast). - DO NOT manually invert primary/secondary colors for dark themes. SASS FILE PLACEMENT: - When combining Sass output from multiple tools into one file, all @use rules must appear at the top before any other statements. Deduplicate @use lines that share the same module path. </important_notes…
| Name | Type | Req | Description |
|---|---|---|---|
| error | – | – | Error state color (typically red) for error messages and destructive actions. Optional - defaults from design system. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181… |
| gray | string | – | Gray/neutral base color for text, borders, disabled states. Optional - defaults from design system preset. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63… |
| info | – | – | Info state color (typically blue) for informational messages. Optional - defaults from design system. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 1… |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| primary | string | yes | Primary brand color - used for main actions, active states, and emphasis. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"), hsl/hsla ("hsl(… |
| secondary | string | yes | Secondary/accent color - used for FABs, selection controls, highlights. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"), hsl/hsla ("hsl(23… |
| success | – | – | Success state color (typically green) for success messages and positive actions. Optional - defaults from design system. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81,… |
| surface | string | yes | Surface/background color - should be light for "light" variant, dark for "dark" variant. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"),… |
| variant | string | – | Theme variant: "light" (light backgrounds, dark text) or "dark" (dark backgrounds, light text). Defaults to "light". |
| warn | – | – | Warning state color (typically orange/amber) for warning messages. Optional - defaults from design system. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63… |
No output schema declared.
No examples provided.
create_theme Create Complete Theme ~2,274
Generate a complete, production-ready Ignite UI theme with palette, typography, and elevations. <use_case> Use this tool as the starting point for new projects. It generates everything needed for a working theme in a single operation: color palette, typography setup, elevation shadows, and the theme application mixin. </use_case> <workflow> 1. Analyzes input colors for palette shade generation suitability 2. Creates color palette using palette() function 3. Sets up typography with specified font family (if includeTypography: true) 4. Configures elevations based on design system (if includeElevations: true) 5. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true) 6. Applies the theme using the theme() mixin 7. Returns luminance warnings if any colors may produce poor shades </workflow> <important_notes> REQUIRED COLORS: - primaryColor: Main brand color - secondaryColor: Accent/highlight color - surfaceColor: Background color (should match variant) SHADE PROGRESSION (important): - Primary and secondary colors are NEVER inverted between light/dark themes. - The palette() function generates shades 50=lightest to 900=darkest for ALL chromatic colors regardless of theme variant. - Only gray shades behave differently (for text contrast against surface). - DO NOT provide inverted primary/secondary colors for dark themes. LUMINANCE ANALYSIS: - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation. - If warnings appear, consider using create_custom_palette for those colors PLATFORM DIFFERENCES: - Angular: Uses igniteui-angular/theming with core() and theme() mixins - Web Components: Uses igniteui-theming directly with palette(), typography(), elevations() mixins - React: Uses igniteui-theming directly (same as Web Components), common with Vite/Next.js - Blazor: Uses igniteui-theming for Sass compilation, theme CSS referenced in B…
| Name | Type | Req | Description |
|---|---|---|---|
| designSystem | string | – | Design system preset: "material" (Material Design), "bootstrap" (Bootstrap), "fluent" (Microsoft Fluent), or "indigo" (Infragistics Indigo). Defaults to "material". |
| fontFamily | string | – | Font family string with fallbacks. Quote names with spaces. Example: '"Inter", "Helvetica Neue", sans-serif' |
| includeElevations | boolean | – | Include elevation shadows in the generated theme. Set to false if you want to configure elevations separately. Defaults to true. |
| includeSpacing | boolean | – | Include spacing CSS custom properties. Applies to Web Components, React, and Blazor. Has no effect on Angular. Defaults to true. |
| includeTypography | boolean | – | Include typography setup in the generated theme. Set to false if you want to configure typography separately. Defaults to true. |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| primaryColor | string | yes | Primary brand color for the theme - used for main actions and emphasis. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"), hsl/hsla ("hsl(23… |
| secondaryColor | string | yes | Secondary/accent color for the theme - used for highlights and selection. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb(63, 81, 181)", "rgb(63 81 181 / 0.5)"), hsl/hsla ("hsl(… |
| surfaceColor | string | yes | Surface/background color for the theme. Use light colors (#FAFAFA) for "light" variant, dark colors (#121212) for "dark" variant. Valid CSS color formats: hex ("#3F51B5", "#3F51B5AA"), rgb/rgba ("rgb… |
| variant | string | – | Theme variant: "light" (light backgrounds, dark text) or "dark" (dark backgrounds, light text). Defaults to "light". |
No output schema declared.
No examples provided.
create_typography Create Typography ~942
Set up typography for Ignite UI themes with custom font families and type scales. <use_case> Use this tool to configure fonts that match your brand identity while maintaining consistent sizing, line heights, and letter spacing based on design system conventions. </use_case> <workflow> 1. Takes font family string and optional design system preset 2. Generates Sass code using the typography() mixin 3. Applies the type scale from the selected design system 4. Optionally applies custom scale overrides </workflow> <important_notes> - Font family string should include fallbacks for cross-platform compatibility - Quote font names that contain spaces: '"Segoe UI"' not 'Segoe UI' - Design system affects: font sizes, line heights, letter spacing, font weights - Type styles include: h1-h6, subtitle-1/2, body-1/2, button, caption, overline SASS FILE PLACEMENT: - When combining Sass output from multiple tools into one file, all @use rules must appear at the top before any other statements. Deduplicate @use lines that share the same module path. </important_notes> <output> Returns: - Generated Sass code with typography() mixin call - Platform-specific module imports - Variable name used (e.g., $my-typography) </output> <error_handling> - Empty font family: Returns error requesting valid font family string </error_handling> <example> Modern sans-serif typography for Material Design: { "fontFamily": "'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif", "designSystem": "material" } </example> <related_tools> - detect_platform: Run first to get correct platform value - create_theme: Use instead if you want typography + palette + elevations together </related_tools> <related_resources> Call read_resource to load reference data: - "theming://presets/typography" — typography presets for all design systems </related_resources>
| Name | Type | Req | Description |
|---|---|---|---|
| customScale | object | – | Custom type scale overrides. Object with type style names as keys (h1, h2, body-1, button, etc.) and style objects as values containing fontSize, fontWeight, lineHeight, letterSpacing, textTransform. |
| designSystem | string | – | Design system preset: "material" (Material Design), "bootstrap" (Bootstrap), "fluent" (Microsoft Fluent), or "indigo" (Infragistics Indigo). Defaults to "material". |
| fontFamily | string | yes | Font family string with fallbacks. Quote names with spaces. Example: '"Inter", "Helvetica Neue", sans-serif' |
| licensed | boolean | – | Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). No… |
| name | string | – | Custom variable name (without $ prefix). If omitted, auto-generates based on tool and variant (e.g., "custom-light", "my-theme"). |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
No output schema declared.
No examples provided.
detect_platform Detect Target Platform ~671
Detect the target platform by analyzing dependencies and project config files. <use_case> Use this tool FIRST before generating any theme code to ensure platform-optimized output. The detected platform determines the correct Sass module paths and syntax. Output format ("sass" vs "css") is a separate concern — see the output parameter on each generation tool. For non-Angular platforms, prefer "css" unless the project has a confirmed Sass pipeline; use your own file-reading tools or ask the user to confirm before choosing output: "sass". </use_case> <detection_signals> Uses multi-signal detection with confidence scoring: 1. Ignite UI packages (HIGH - 100): igniteui-angular, igniteui-webcomponents, igniteui-react, IgniteUI.Blazor 2. Config files (MEDIUM-HIGH - 80): angular.json, vite.config.*, next.config.*, .csproj 3. Framework packages (LOW - 40): @angular/core, react, lit (fallback only) 4. Generic fallback: When no Ignite UI product is found, returns "generic" for standalone theming </detection_signals> <output> Returns: - platform: "angular" | "webcomponents" | "react" | "blazor" | "generic" | null - confidence: "high" | "medium" | "low" | "none" - ambiguous: true if multiple Ignite UI platforms detected (requires user to specify explicitly) - alternatives: Array of detected platforms when ambiguous - signals: Array of detection signals found - detectedPackage: The primary package that triggered detection - platformInfo: Name, theming module path, and description "generic" means no Ignite UI product framework was found. Most tools work in generic mode (palette, typography, elevations, theme generation, color references, layout tokens with scope). Component-specific tools (create_component_theme, get_component_design_tokens) are NOT available in generic mode. The response includes Sass load path guidance based on detected build tooling. null is reserved for error states (package.json read failure) or ambiguous mu…
| Name | Type | Req | Description |
|---|---|---|---|
| packageJsonPath | string | – | Path to package.json file, relative to current working directory. Defaults to "./package.json". |
No output schema declared.
No examples provided.
get_chart_series_colors Get Chart Series Colors ~997
Retrieve the shared Ignite UI chart series brush palette, per-chart-type color-token guidance, and validate custom brush lists. <use_case> Use this tool when theming Ignite UI charts (category, data, doughnut, pie, funnel, shape, financial, linear/radial gauge, bullet graph) and you need the default series colors, want to know which theme tokens accept a custom color list for a given chart type, or want to sanity-check a custom brush list before using it in a $brushes: (...) override. NOT covered by this tool: sparkline (singular tokens, not a palette list) and selection/highlight colors (selectionBrush, focusBrush — component-only, no Sass theme equivalent). </use_case> <workflow> 1. Call with no arguments to get the full 10-color default (regular) palette. 2. Optionally set mode: "color-blind" for the accessibility-friendly variant. 3. Optionally set index (1-10) to retrieve a single brush color. 4. Optionally set chartType (e.g. "category-chart", "financial-chart", "linear-gauge") to see which theme tokens on that chart type accept the palette, plus a ready-to-use Sass snippet. 5. Optionally set customBrushes to a color array to validate it before using it in an override — checks each color is valid and flags color pairs with similar hues that may be hard to tell apart. </workflow> <output_examples> Default palette: {} → 10-color list + var(--chart-brushes) reference Single brush: { index: 3 } → the 3rd regular-palette color Chart-type guidance: { chartType: "category-chart" } → token table (brushes, marker-brushes, outlines, marker-outlines, trend-line-brushes, negative-brushes, negative-outlines) + a category-chart-theme() Sass snippet Custom brush validation: { customBrushes: ["#4285f4", "#ea4335", "#fbbc05", "#34a853"] } → validity + hue-distinctness warnings </output_examples> <important_notes> THEME VS. COMPONENT PRECEDENCE: - This tool and the Sass snippets it genera…
| Name | Type | Req | Description |
|---|---|---|---|
| chartType | string | – | Optional chart type to get color-token guidance for (e.g., "category-chart", "financial-chart", "linear-gauge", "bullet-graph"). When provided, the response lists which theme tokens accept the series… |
| customBrushes | array | – | Optional array of CSS colors to validate as a custom series brush list before using them in a $brushes: (...) override. When provided, the tool checks each color is valid and flags any pair of colors… |
| index | integer | – | Optional 1-based index (1-10) to retrieve a single brush color from the palette instead of the full 10-color list. |
| mode | string | – | Which series brush palette to use: "regular" (default, visually distinct colors) or "color-blind" (alternate palette for better distinguishability under common color vision deficiencies, activated vi… |
No output schema declared.
No examples provided.
get_color Get Palette Color ~546
Retrieve a palette color from Ignite UI Theming as a CSS variable reference. <use_case> Use this tool when you need to reference a specific palette color in CSS or Sass code. Returns CSS variable references that work in both Sass and CSS contexts. Common scenarios: - Setting component backgrounds/foregrounds using theme colors - Creating hover/focus states with opacity variations - Ensuring text contrast against colored backgrounds </use_case> <workflow> 1. Specify the color family (primary, secondary, gray, etc.) 2. Optionally specify a shade variant (50-900, A100-A700) 3. Optionally request the contrast color for text readability 4. Optionally apply opacity for transparency effects </workflow> <output_examples> Basic color: { color: "primary" } → var(--ig-primary-500) Specific shade: { color: "primary", variant: "600" } → var(--ig-primary-600) Contrast color: { color: "primary", variant: "600", contrast: true } → var(--ig-primary-600-contrast) With opacity: { color: "primary", opacity: 0.5 } → hsl(from var(--ig-primary-500) h s l / 0.5) Contrast with opacity: { color: "primary", contrast: true, opacity: 0.7 } → hsl(from var(--ig-primary-500-contrast) h s l / 0.7) </output_examples> <important_notes> CSS VARIABLE NAMING: - Base colors: --ig-{color}-{variant} (e.g., --ig-primary-500) - Contrast: --ig-{color}-{variant}-contrast (e.g., --ig-primary-500-contrast) GRAY RESTRICTIONS: - Gray only supports standard shades (50-900), not accent shades (A100-A700) OPACITY HANDLING: - Uses CSS relative color syntax: hsl(from <color> h s l / <opacity>) - Works in modern browsers (CSS Color Level 4) - For Sass projects, this syntax is passed through unchanged </important_notes> <related_tools> - create_palette: Generate a complete palette with these colors - create_component_theme: Use retrieved colors in component theming </related_tools>
| Name | Type | Req | Description |
|---|---|---|---|
| color | string | yes | – |
| contrast | boolean | – | – |
| opacity | number | – | – |
| variant | string | – | – |
No output schema declared.
No examples provided.
get_component_design_tokens Get Component Design Tokens ~1,221
Discover available design tokens (themeable properties) for an Ignite UI component. <use_case> ALWAYS call this tool FIRST before using create_component_theme. It returns the exact token names that can be customized for a component, preventing hallucination of invalid property names. NOTE: This tool returns tokens for Ignite UI framework components. It is NOT useful when the detected platform is "generic" — component theming requires a specific Ignite UI product (angular, webcomponents, react, or blazor). </use_case> <workflow> 1. Provide the component name (e.g., "button", "avatar", "grid") 2. Receive list of all available tokens with their types and descriptions 3. Use the token names in create_component_theme </workflow> <important_notes> COMPONENT NAMING: - Basic components: Use simple names like "avatar", "badge", "card" - Button variants: Use specific variant names like "flat-button", "contained-button", "outlined-button", "fab-button" (NOT just "button") - Icon button variants: "flat-icon-button", "contained-icon-button", "outlined-icon-button" - Child sub-components: Use names like "list-item", "card-header", "accordion-header", "tab-item", "step", "expansion-panel-header". These resolve to the parent component's theme automatically. CHILD SUB-COMPONENTS: - Some component parts (e.g., "list-item", "card-header", "accordion-header") don't have their own theme function — they are styled through the parent component's theme tokens. - When you query a child sub-component, the response includes a note explaining the parent-child relationship and shows the parent theme's full token list. - The token descriptions guide you to the relevant tokens (e.g., "item-background" for list items, "header-text-color" for card headers). - When you then call create_component_theme with a child name, it automatically uses the parent's theme function, variable name, and selector — producing output that is…
| Name | Type | Req | Description |
|---|---|---|---|
| component | string | yes | Component name to get design tokens for (e.g., "button", "avatar", "grid"). Use exact names like "flat-button" for button variants. Child sub-component names like "list-item", "card-header", "accordi… |
No output schema declared.
No examples provided.
read_resource Read Theming Resource ~816
Read a theming resource by URI. Returns reference data such as platform configurations, color palette presets, typography presets, color guidance, and layout documentation. <use_case> Use this tool to load reference data before or during theme generation. Other tools reference these resources in their related_resources sections — call this tool with the listed URI to retrieve the data. Common scenarios: - Load palette presets to see available colors before creating a palette - Read color guidance to understand shade usage and semantic roles - Check platform configuration for usage examples and supported features - Read layout documentation for spacing, sizing, and roundness details </use_case> <workflow> 1. Identify the resource URI from the available_resources list or from a related_resources hint in another tool 2. Call this tool with the URI 3. Use the returned data to inform your next action </workflow> <output> Returns the resource content as text. Format depends on the resource: - application/json resources return JSON data - text/markdown resources return Markdown documentation </output> <error_handling> If the URI is not found, returns the list of all available resource URIs. </error_handling> <available_resources> Platforms: - "theming://platforms" — Supported Platforms - "theming://platforms/angular" — Angular Platform Config - "theming://platforms/webcomponents" — Web Components Platform Config - "theming://platforms/react" — React Platform Config - "theming://platforms/blazor" — Blazor Platform Config - "theming://platforms/generic" — Generic Platform Config Presets: - "theming://presets/palettes" — Color Palettes - All Presets - "theming://presets/palettes/light" — Color Palettes - Light - "theming://presets/palettes/dark" — Color Palettes - Dark - "theming://presets/typography" — Typography Presets - "theming://presets/elevations" — Elevation Presets - "theming://p…
| Name | Type | Req | Description |
|---|---|---|---|
| uri | string | yes | URI of the theming resource to read (e.g., "theming://presets/palettes", "theming://platforms/angular"). See the available_resources list in the tool description for all valid URIs. |
No output schema declared.
No examples provided.
set_roundness Set Roundness Scale ~667
Set global or component-specific roundness by updating --ig-radius-factor. <use_case> Use this tool for requests like: - "Make the flat buttons more round" - "Square off the cards" </use_case> <behavior> - Sets --ig-radius-factor in the chosen scope (defaults to :root) - 0 = minimum radius, 1 = maximum radius, values between interpolate - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root. </behavior> <sass_notes> - border-radius() responds to --ig-radius-factor without extra mixins </sass_notes> <example> Round avatars more: { "component": "avatar", "radiusFactor": 0.9 } Globally reduce roundness: { "radiusFactor": 0.8 } </example> <related_resources> Call read_resource to load reference data: - "theming://docs/spacing-and-sizing" — spacing and sizing overview - "theming://docs/functions/border-radius" — border radius function </related_resources>
| Name | Type | Req | Description |
|---|---|---|---|
| component | string | – | Optional component name to scope the layout change (e.g., "flat-button", "calendar", "avatar"). If omitted, the change applies globally via :root. Note: component targets Ignite UI framework selector… |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| radiusFactor | number | yes | Roundness scale factor for --ig-radius-factor. 0 = minimum radius, 1 = maximum radius. Values must be between 0 and 1. |
| scope | string | – | Optional CSS selector scope for the change (e.g., ".my-theme", ":root", "#app"). Ignored when component is provided. |
No output schema declared.
No examples provided.
set_size Set Size Scale ~712
Set global or component-specific sizing by updating --ig-size. <use_case> Use this tool for requests like: - "Make the calendar smaller" - "The buttons feel too big" - "Use the small size everywhere" </use_case> <behavior> - Sets --ig-size in the chosen scope (defaults to :root) - Accepts "small", "medium", "large" (mapped to 1, 2, 3) or numeric values - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root. </behavior> <sass_notes> - Components map --ig-size to --component-size internally - Styles using sizable() require @include sizable() in component styles </sass_notes> <example> Make flat buttons medium: { "component": "flat-button", "size": "medium" } Make everything small globally: { "size": "small" } </example> <related_resources> Call read_resource to load reference data: - "theming://docs/spacing-and-sizing" — spacing and sizing overview - "theming://docs/functions/sizable" — sizable value function - "theming://docs/mixins/sizable" — sizable mixin </related_resources>
| Name | Type | Req | Description |
|---|---|---|---|
| component | string | – | Optional component name to scope the layout change (e.g., "flat-button", "calendar", "avatar"). If omitted, the change applies globally via :root. Note: component targets Ignite UI framework selector… |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| scope | string | – | Optional CSS selector scope for the change (e.g., ".my-theme", ":root", "#app"). Ignored when component is provided. |
| size | – | yes | Size value to set for --ig-size. Accepts "small" (1), "medium" (2), "large" (3), or numeric 1, 2, 3 only. |
No output schema declared.
No examples provided.
set_spacing Set Spacing Scale ~773
Set global or component-specific spacing by updating --ig-spacing. <use_case> Use this tool for requests like: - "The button feels bloated" - "Tighten the spacing on the form" - "Double the padding on cards" </use_case> <behavior> - Sets --ig-spacing in the chosen scope (defaults to :root) - Optional overrides for --ig-spacing-inline and --ig-spacing-block - 0 = no spacing, 1 = default, 2 = double (fractions allowed) - spacing is required; inline/block are optional overrides - When platform is "generic", do NOT use the "component" parameter (it resolves Ignite UI component selectors). Use "scope" with a custom CSS selector instead, or omit both for :root. </behavior> <sass_notes> - pad(), pad-inline(), pad-block() require @include spacing() once </sass_notes> <example> Reduce calendar spacing: { "component": "calendar", "spacing": 0.75 } Override inline spacing: { "scope": ".compact", "inline": 0.5, "block": 0.75 } </example> <related_resources> Call read_resource to load reference data: - "theming://docs/spacing-and-sizing" — spacing and sizing overview - "theming://docs/functions/pad" — pad spacing function - "theming://docs/mixins/spacing" — spacing mixin </related_resources>
| Name | Type | Req | Description |
|---|---|---|---|
| block | number | – | Block spacing scale multiplier for --ig-spacing-block. Overrides block spacing only. |
| component | string | – | Optional component name to scope the layout change (e.g., "flat-button", "calendar", "avatar"). If omitted, the change applies globally via :root. Note: component targets Ignite UI framework selector… |
| inline | number | – | Inline spacing scale multiplier for --ig-spacing-inline. Overrides inline spacing only. |
| output | string | – | Output format for the generated code. "sass" — Returns Sass source using igniteui-theming functions and mixins. Requires a Sass pipeline in the consuming project. Prefer for Angular (Angular CLI han… |
| platform | string | – | Target platform: "angular" for Ignite UI for Angular, "webcomponents" for Ignite UI for Web Components, "react" for Ignite UI for React, "blazor" for Ignite UI for Blazor, or "generic" for platform-a… |
| scope | string | – | Optional CSS selector scope for the change (e.g., ".my-theme", ":root", "#app"). Ignored when component is provided. |
| spacing | number | yes | Spacing scale multiplier for --ig-spacing. 0 = none, 1 = default, 2 = double. Fractions allowed. |
No output schema declared.
No examples provided.
What is the Ignite UI Theming MCP Server server?
Ignite UI Theming MCP Server is listed in the public MCP registry as io.github.IgniteUI/igniteui-theming. Generate Sass palettes, typography, elevations, and themes for Ignite UI components. This page covers its npm package (igniteui-theming).
Is the Ignite UI Theming MCP Server server safe to use?
Ignite UI Theming MCP Server scores 92 out of 100 on VerifyMCP. We found no known CVEs affecting it as of 20 September 2026. It declares no install or post-install scripts. Its build provenance is signed and verified. That is a record of what we were able to check automatically, not an endorsement. The category breakdown on this page shows every signal behind the number, including the ones we could not confirm.
What tools does the Ignite UI Theming MCP Server server expose?
Ignite UI Theming MCP Server exposes 14 tools: detect_platform, create_palette, create_custom_palette, create_typography, create_elevations, and 9 more. Their descriptions and schemas cost roughly 19,227 tokens of context every time the server is loaded.
Is the Ignite UI Theming MCP Server server still maintained?
Ignite UI Theming MCP Server is still listed as active in the MCP registry. We last reached this channel on 20 September 2026. Those dates come from our own scans of the registry and the channel itself, not from anything the publisher announced.
What licence is the Ignite UI Theming MCP Server server under?
Ignite UI Theming MCP Server declares the MIT licence, which is OSI-approved. That covers the source only, and says nothing about the cost of any service it calls.