# Ignite UI Theming MCP Server (npm · igniteui-theming)

Generate Sass palettes, typography, elevations, and themes for Ignite UI components.

- Trust score: 92/100 (high trust)
- Change this week: +3
- Registry status: active
- Liveness: live
- Owner verified: no
- Last scored: 2026-09-20

## Components

- npm · `igniteui-theming`: 92/100 (this document), [markdown](https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming.md), [page](https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming)

## Channel facts

- Registry: `npm`
- Package: `igniteui-theming`
- Version: `29.0.0`
- Transport: `stdio`

## Trust breakdown

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. Scores are 0–100 per category. Scoring method: https://verifymcp.io/docs/scoring (what has changed: https://verifymcp.io/docs/scoring/changelog)

Scored 2026-09-20.

- **Supply Chain Security**: 99/100
  - No malware found by supply-chain analysis.
  - No known CVEs affecting this package version or its production dependencies.
  - No install/post-install scripts declared.
  - 37 of 148 dependencies flagged as unhealthy.
- **Provenance & Transparency**: 97/100
  - Source repository is publicly reachable at the declared URL.
  - Cryptographically verified build provenance (signed, bound to IgniteUI/igniteui-theming).
  - Clear OSI-approved license (MIT).
  - Actively maintained (last published 8 days ago).
  - Disclosure check failed: no security disclosure policy was found in the source repository.
- **Schema Quality & AI Usability**: 74/100
  - 100% of prompts and resources have a non-trivial description (not blank, and not just the item's name).
  - AI-judged instruction clarity (excellent).
  - 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.
  - Usage-examples check failed: none of the tools include examples.
- **Stability & Change Management**: 83/100
  - Stability observed for 25 of 30 days with no destabilising changes; credit accrues until the full window elapses.
- **Tool Coverage**: 99/100
  - 100% of tools have a non-trivial description (not blank, and not just the tool's name).
  - 96% of tool parameters carry a description.
- **Tool Safety**: 100/100
  - No prompt-injection markers were found in the server instructions, tool names or descriptions we captured.
  - We read all 14 captured tool definition(s), and no name or description among them implies an irreversible operation.
  - An AI judge read all 15 captured unit(s) of tool text and found none that tries to manipulate the model reading it.
- **Capabilities**: 100/100
  - Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.

## Install

### 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.

### Claude

```bash
claude mcp add igniteui-igniteui-theming -- npx -y igniteui-theming
```

### Cursor

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

### VS Code

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

### Codex

```bash
codex mcp add igniteui-igniteui-theming -- npx -y igniteui-theming
```

### opencode

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "igniteui-igniteui-theming": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "igniteui-theming"
      ],
      "enabled": true
    }
  }
}
```

### OpenClaw

```bash
openclaw mcp add igniteui-igniteui-theming --command npx --arg -y --arg igniteui-theming
```

### Hermes

```yaml
mcp_servers:
  igniteui-igniteui-theming:
    command: "npx"
    args: ["-y", "igniteui-theming"]
```

### Netclaw

```json
{
  "McpServers": {
    "igniteui-igniteui-theming": {
      "Transport": "stdio",
      "Command": "npx",
      "Arguments": [
        "-y",
        "igniteui-theming"
      ]
    }
  }
}
```

### Vellum

```bash
assistant mcp add igniteui-igniteui-theming -t stdio -c npx -a -y igniteui-theming
```

### Other

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

## Changelog

Every change recorded for this component, newest first. Days that predate change tracking, or that we cannot explain, say so: "we were watching and nothing happened" and "we were not watching" are different claims.

### 2026-09-19 (score 92, +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.

### 2026-09-17 (score 91, +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.

### 2026-09-15 (score 90, +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.

### 2026-09-13 (score 89, +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.

### 2026-09-12 (score 88, +15)

- [security improvement] Malware scan: unverified → pass

### 2026-09-11 (score 73, −14)

- [security regression] Malware scan: pass → unverified
- [functional] Package version: 28.1.1 → 29.0.0

### 2026-09-09 (score 87, +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.

### 2026-09-07 (score 86, +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.

## MCP tools (14)

### `detect_platform` (~671 tokens)

Detect Target Platform

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…

Input parameters:

- `packageJsonPath` (string): Path to package.json file, relative to current working directory. Defaults to "./package.json".

### `create_palette` (~3016 tokens)

Create Color Palette

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…

Input parameters:

- `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, required): 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, required): 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, required): 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…

### `create_custom_palette` (~3524 tokens)

Create Custom Handmade Palette

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…

Input parameters:

- `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` (required): 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` (required): 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` (required): 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,…

### `create_typography` (~942 tokens)

Create Typography

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>

Input parameters:

- `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, required): 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…

### `create_elevations` (~737 tokens)

Create Elevations

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>

Input parameters:

- `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…

### `create_theme` (~2274 tokens)

Create Complete Theme

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…

Input parameters:

- `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, required): 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, required): 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, required): 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".

### `set_size` (~712 tokens)

Set Size Scale

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>

Input parameters:

- `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` (required): Size value to set for --ig-size. Accepts "small" (1), "medium" (2), "large" (3), or numeric 1, 2, 3 only.

### `set_spacing` (~773 tokens)

Set Spacing Scale

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>

Input parameters:

- `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, required): Spacing scale multiplier for --ig-spacing. 0 = none, 1 = default, 2 = double. Fractions allowed.

### `set_roundness` (~667 tokens)

Set Roundness Scale

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>

Input parameters:

- `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, required): 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.

### `get_component_design_tokens` (~1221 tokens)

Get Component Design Tokens

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…

Input parameters:

- `component` (string, required): 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…

### `create_component_theme` (~2331 tokens)

Create Component Theme

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",…

Input parameters:

- `component` (string, required): 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, required): 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, required): 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".

### `get_color` (~546 tokens)

Get Palette Color

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>

Input parameters:

- `color` (string, required)
- `contrast` (boolean)
- `opacity` (number)
- `variant` (string)

### `get_chart_series_colors` (~997 tokens)

Get Chart Series Colors

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…

Input parameters:

- `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…

### `read_resource` (~816 tokens)

Read Theming Resource

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…

Input parameters:

- `uri` (string, required): 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.

## Diagnostics

Captured diagnostic sections: Provenance, Dependencies. The full working is on the page: https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming#diagnostics

## Score history

- 2026-09-20: 92
- 2026-09-19: 92
- 2026-09-18: 91
- 2026-09-17: 91
- 2026-09-16: 90
- 2026-09-15: 90
- 2026-09-14: 89
- 2026-09-13: 89
- 2026-09-12: 88
- 2026-09-11: 73
- 2026-09-10: 87
- 2026-09-09: 87
- 2026-09-08: 86
- 2026-09-07: 86
- 2026-09-06: 85
- 2026-09-05: 85
- 2026-09-04: 84
- 2026-09-03: 84
- 2026-09-02: 80
- 2026-09-01: 80
- 2026-08-31: 80
- 2026-08-30: 80
- 2026-08-29: 80
- 2026-08-28: 80
- 2026-08-27: 80
- 2026-08-26: 80

## Common questions

### 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.

## Links

- npm package: https://www.npmjs.com/package/igniteui-theming
- Socket report: https://socket.dev/npm/package/igniteui-theming
- Repository: https://github.com/IgniteUI/igniteui-theming
- Changelog RSS feed: https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming.xml
- Changelog JSON feed: https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming.json
- HTML version of this page: https://verifymcp.io/servers/igniteui-igniteui-theming/igniteui-theming
