Ignite UI Theming MCP Server: Setup for Claude, Cursor and Other Apps

• Finds which Ignite UI product your project uses

  Looks at your package.json and config files to work out whether the project uses Ignite UI for Angular, Web Components, React or Blazor. The other tools use the answer to pick the right Sass paths.

  Try: “Check which Ignite UI platform this project uses before you write any theme code.”

  Files · detect_platform

• Builds a full color palette from a few brand colors

  Takes your primary, secondary and surface colors and fills in every shade from lightest to darkest. It returns Sass or plain CSS variables.

  Try: “Make a light palette from primary #3F51B5 and secondary #FF4081 as CSS variables.”

  Read · create_palette

• Builds a palette from shade values you pick

  Lets you give every shade of a color yourself instead of having them generated. Use it when a design system already fixes the exact values.

  Try: “Build a custom palette from these 14 hex shades of our brand blue.”

  Read · create_custom_palette

• Copies the shade steps of a color ladder you already have

  Reads an existing set of shades and works out the lightness curve behind it. You can then reuse that curve for new colors so they step the same way.

  Try: “Fit a scale to our existing gray ladder so new palettes match its steps.”

  Read · fit_color_scale

• Sets fonts and type sizes for a theme

  Writes the font family and type scale setup for your theme, using one of the Material, Bootstrap, Fluent or Indigo presets as a base.

  Try: “Set up typography with Inter and the Fluent type scale.”

  Read · create_typography

• Sets the shadow levels used to lift cards and menus

  Produces the shadow setup for the design system you pick, so buttons, cards and menus sit at the right height.

  Try: “Generate elevations for the Indigo design system.”

  Read · create_elevations

• Writes a whole theme: palette, type and shadows

  Combines palette, typography and elevations into one theme file for light or dark mode. It is the quickest way to start a themed app.

  Try: “Create a dark Material theme for my Angular app with primary #1976D2.”

  Read · create_theme

• Changes how big controls are, app-wide or per component

  Writes the code that switches component size between small, medium and large, either for the whole app or for one component.

  Try: “Make the grid use small sizing and leave everything else medium.”

  Read · set_size

• Changes padding and gaps, app-wide or per component

  Writes the code that tightens or loosens the spacing inside components. You can scope it to one component or one CSS selector.

  Try: “Loosen spacing on cards by a factor of 1.25.”

  Read · set_spacing

• Changes how rounded corners are

  Writes the code that sets the corner radius factor, from square to fully round. It works for the whole app or a single component.

  Try: “Make all buttons fully rounded but keep inputs square.”

  Read · set_roundness

• Lists the style settings a component accepts

  Looks up which design tokens a component, such as button or grid, can be styled with. Claude calls it before writing a component theme so it only uses real token names.

  Try: “Which tokens can I change on the flat button?”

  Read · get_component_design_tokens

• Writes the style code for one component

  Generates Sass or CSS that restyles a single component using the tokens you give it, for example a button with a new background and radius.

  Try: “Restyle the avatar with a blue background and an 8px radius.”

  Read · create_component_theme

• Returns the CSS variable for a palette color

  Gives you the exact CSS variable reference for a palette color and shade, such as primary 500, so the code you write stays tied to the theme.

  Try: “What is the variable for the primary 300 color?”

  Read · get_color

• Returns the chart color set and checks custom ones

  Returns the shared color list used for chart series and the color tokens each chart type uses. It can also check a list of brush colors you supply.

  Try: “Which colors does a bar chart use, and does my custom list of five colors work?”

  Read · get_chart_series_colors

• Reads the built-in theming reference docs

  Opens one of the reference documents bundled with the server, such as platform setup, palette presets, typography presets and layout guidance, by its theming:// address.

  Try: “Read the platform setup guide from the theming resources.”

  Read · read_resource

Watch out for

• It only returns code and reads your package.json

  The tools hand back Sass and CSS text for you or your assistant to paste in. The only project file the code reads is package.json, in detect_platform. github.com

Security advisories