# Ignite UI Theming MCP server

> Generate Sass palettes, typography, elevations and themes for Ignite UI components from your AI assistant.

- Listing: https://mcp.tc/i/ignite-ui-theming
- Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint.
- Type: local (stdio)
- Auth: no API key needed
- Category: [Design, Websites & CMS](https://mcp.tc/c/design)
- Vendor: Infragistics (IgniteUI)
- Repository: <https://github.com/IgniteUI/igniteui-theming>
- Package: npm `igniteui-theming`

## About

Connects an AI assistant to the Ignite UI theming library from Infragistics. It can generate color palettes with shade variations, typography setups, elevations and complete light or dark themes as Sass code, customize components with design tokens, and check colors for accessibility.

It runs locally over stdio as part of the igniteui-theming npm package, started with npx. No sign-in or API key is needed. Node.js is required. The package is MIT licensed.

## What it can do

- Generate color palettes with automatic shade variations
- Create typography systems and type scales
- Build complete light and dark themes in Sass
- Customize components with design tokens
- Validate colors for accessibility compliance
- Use material, bootstrap, fluent and indigo presets

## Example prompts

- "Generate a dark indigo-based Ignite UI palette with Sass output."
- "Create a full light theme for my Ignite UI app using the fluent preset."
- "Set up typography for the material type scale in my project."
- "Check whether my primary and surface colors meet accessibility contrast."

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport stdio ignite-ui-theming -- npx -y igniteui-theming
```

2. Start Claude Code and type `/mcp`. **ignite-ui-theming** should show as connected.

Add `--scope user` to make it available in every project.

### Claude Desktop

1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add:

`claude_desktop_config.json`:

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

2. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=ignite-ui-theming&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImlnbml0ZXVpLXRoZW1pbmciXX0%3D>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

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

Needs Node.js on your computer.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=ignite-ui-theming&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22igniteui-theming%22%5D%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"ignite-ui-theming","type":"stdio","command":"npx","args":["-y","igniteui-theming"]}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

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

Needs Node.js on your computer.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

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

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

### Codex

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

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.ignite-ui-theming]
command = "npx"
args = ["-y", "igniteui-theming"]
```

Needs Node.js on your computer.

### Gemini CLI

```bash
gemini mcp add ignite-ui-theming npx -- -y igniteui-theming
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients that start local servers accept this shape:

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

Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields.

Needs Node.js on your computer.

## Details

- Server version: 29.0.0
- Last checked: 2026-10-04
- Listed: 2026-10-04
- Updated: 2026-10-04

---
Source: https://mcp.tc/i/ignite-ui-theming (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report