Ignite UI Theming MCP Server

Name: Ignite UI Theming MCP Server
Author: Ignite UI

Generates Sass and CSS theme code for Ignite UI components on Angular, Web Components, React and Blazor

Official · Ignite UI TypeScript Local · stdio Developer tools Design

GitHub npm Website

61 popularity score ★ 44 ↓ 13k/wk

Connect your client

Local (npm)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Claude CodeTerminal

claude mcp add ignite-ui-theming -- npx -y igniteui-theming

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

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

Codex~/.codex/config.toml

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

Gemini CLITerminal

gemini mcp add --scope user ignite-ui-theming npx -- -y igniteui-theming

Local (from source)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio

Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.

Or add it by command or config

FirstTerminal

git clone https://github.com/IgniteUI/igniteui-theming.git
cd igniteui-theming
npm install
npm run build

Claude CodeTerminal

claude mcp add ignite-ui-theming -- node '<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js'

Claude Desktopclaude_desktop_config.json

{
  "mcpServers": {
    "ignite-ui-theming": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js"
      ]
    }
  }
}

Cursor~/.cursor/mcp.json

{
  "mcpServers": {
    "ignite-ui-theming": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js"
      ]
    }
  }
}

VS Code.vscode/mcp.json

{
  "servers": {
    "ignite-ui-theming": {
      "type": "stdio",
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js"
      ]
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.ignite-ui-theming]
command = "node"
args = ["<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js"]

Gemini CLITerminal

gemini mcp add --scope user ignite-ui-theming node -- '<ABSOLUTE_PATH_TO_CLONE>/packages/theming/dist/mcp/index.js'

What it does

The Ignite UI Theming MCP Server comes from the Ignite UI team and ships inside the igniteui-theming npm package, the same package that holds the Ignite UI Sass theming library. It runs locally over stdio and gives an assistant a set of generators for theme code: color palettes with automatic shade calculation or hand-picked shades, typography with type scales, elevation shadows, complete light or dark themes, per-component themes built from design tokens, and global or per-component size, spacing and roundness settings.

Output targets Ignite UI for Angular, Web Components, React or Blazor, or a generic form for the standalone theming library, across the Material, Bootstrap, Fluent and Indigo design systems. Generators return Sass or CSS custom properties; the default is Sass for Angular and CSS for the other platforms. A detect_platform tool reads the project's package.json and config files to pick the platform first.

The root README advertises 8 tools, but version 29.1.0 registers 14 in packages/mcp/src/index.ts: besides the eight it lists, there are set_size, set_spacing, set_roundness, get_color, get_chart_series_colors and read_resource, the last of which serves the server's reference resources (platform notes, preset palettes, color guidance, layout docs) to clients that do not read MCP resources.

What it needs

Runtime	Node.js

Node.js with npx, on any operating system Node supports. The package installs sass-embedded as its own dependency for compiling theme code. Output is meant for projects that use Ignite UI components (Angular, Web Components, React or Blazor) or the igniteui-theming Sass library. No account or API key.

Limits

It generates code and reference text only; it does not edit stylesheets in the project. For Angular, create_theme with CSS output returns only CSS custom properties, without the component-scoped class styles the core() and theme() mixins produce; Sass output is needed for a full Angular theme. Palette generation warns that base colors with very low or very high luminance give poor automatic shades and points to create_custom_palette. get_chart_series_colors does not cover sparkline colors or selection and focus brushes. The root README's tool table lists 8 tools; the package registers 14.

Who it suits

Developers who build with Ignite UI components and want an assistant to write palette, typography, elevation and component theme code that matches the library's own Sass API. It runs locally, needs no sign-in and only reads project manifests, so it is easy to add to an editor. It is of little use for projects that do not use Ignite UI or its theming library. For scaffolding Ignite UI apps and components rather than theming them, the same vendor's separate Ignite UI MCP server (igniteui-cli, which we also list) is the one to look at.

Tools 14

detect_platform: Works out which Ignite UI platform a project uses from package.json and config files
create_palette: Builds a color palette from base colors with shades calculated automatically
create_custom_palette: Builds a palette where each shade value is set by hand
create_typography: Produces typography setup with font family and a design-system type scale
create_elevations: Produces elevation shadow definitions
create_theme: Produces a full light or dark theme combining palette, typography and elevations
set_size: Sets global or per-component sizing through the --ig-size variable
set_spacing: Sets global or per-component spacing through the --ig-spacing variable
set_roundness: Sets global or per-component corner roundness through the --ig-radius-factor variable
get_component_design_tokens: Lists the design tokens a given component exposes for theming
create_component_theme: Produces theme code for one component from chosen token values
get_color: Looks up a single palette color by family and shade
get_chart_series_colors: Returns the default chart series palette, chart token guidance, and checks custom brush lists
read_resource: Returns one of the server's reference resources by URI, such as presets or color guidance

Popularity

61 popularity score, on our list (the bar is 36)

★ 44 ↓ 13k/wk

GitHub stars, whole repository	44	19.8 points
Stars in 30 days	+0	0 points
npm downloads, last week	13,256	33 points
Official server	Yes	8 points

It lives in the folder packages/theming of igniteui/igniteui-theming, which holds more than this server. Its stars are the whole repository's, so in the score they never count for more than its own downloads.

Measured 2026-11-08. How the score works.

Where it is published

Code	igniteui/igniteui-theming/packages/theming ★ 44, the whole repository
npm	igniteui-theming 30.1.0, 2026-11-03

What it can reach

Runs	On your machine
Reaches	Files on your machine
Changes things	No: it reads only
Sign-in	None
Licence	MIT (npm)
Last code change	2026-11-05

Runs on your machine as a Node process over stdio, with no sign-in and no settings. detect_platform reads the project's package.json (path settable, ./package.json by default) and config files such as angular.json, vite.config.* or .csproj to guess the platform. The other tools build Sass or CSS text from their arguments and bundled reference data and return it to the assistant; none of them edits project files. The package depends on sass-embedded, which brings a native Dart Sass binary for compiling theme code.

Over time

GitHub stars, whole repository 44 +0

4444

8 Oct 20268 Nov 2026

npm downloads a week 13k +5.8k (+78 %)

25k3.8k

20 Oct 20258 Nov 2026

Before the site measured it, read from npm's daily download counts.

Popularity score 61 +8 (+14 %)

6153

8 Oct 20268 Nov 2026

What is rising across the directory

Sources

Page checked 2026-10-15.

Badge for your README

Shows this server's rank in its category, and stars for a server that runs on your machine. It updates every hour.

MarkdownREADME.md

[![Ignite UI Theming MCP Server on EveryMCPServer](https://everymcpserver.com/badge/ignite-ui-theming-mcp-server.svg)](https://everymcpserver.com/servers/ignite-ui-theming-mcp-server)

Connect your client

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

What it does

What it needs

Limits

Who it suits

Tools 14

Similar servers

Chakra UI MCP Server

UI5 Web Components for React MCP Server

Blade MCP

mcp-servers-for-revit

Shadcn UI v4 MCP Server

Canvas Kit MCP