Skip to content
Agentmart
Submit a tool

Ignite UI Theming MCP Server

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

Connector by IgniteUI · GitHub account verified by the MCP Registry

IndexedMITLocal (stdio)★ 44
Write a review

Install

Works with Claude Code, Codex, VS Code, Cursor, Windsurf, Claude Desktop. Read the repository before you give any tool access to your data.

npx agentmarket install connector/igniteui-igniteui-theming

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

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

Use cases: ui-design, frontend-development

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this server can do and what it asks for, from its tool list, install config and code. Checked Oct 25, 2026.

Tools
5 read · 10 write · 0 delete
Secrets
None asked for
Install scripts
None found
Runs as
Node.js package

Tools by what they do 15

Read from the source code; the running server may list different tools.

Read 5 · Look things up without changing anything.

  • detect_platform
  • get_chart_series_colors
  • get_color
  • get_component_design_tokens
  • read_resource

Write 10 · Create, change, send or run things.

  • create_component_theme
  • create_custom_palette
  • create_elevations
  • create_palette
  • create_theme
  • create_typography
  • fit_color_scale
  • set_roundness
  • set_size
  • set_spacing

Network hosts it talks to 2

  • dl.infragistics.com · found in code
  • github.com · found in code

Tools (15)

Read from the source code; the running server may differ. Descriptions are the server’s own words; hidden characters are shown as [U+…].

  • create_component_themeCreate 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)…

  • create_custom_paletteCreate 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> PREFER …

  • create_elevationsCreate 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…

  • create_paletteCreate 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). This is the right tool for almost every palette - pass the brand colors and let the generator do the rest. </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 …

  • create_themeCreate 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. Creates color palette using palette() function 2. Sets up typography with specified font family (if includeTypography: true) 3. Configures elevations based on design system (if includeElevations: true) 4. Configures spacing utilities for …

  • create_typographyCreate 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 …

  • detect_platformDetect 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…

  • fit_color_scaleFit Color Scale

    Derive a shade scale from an existing color ladder. <use_case> Use when shades must follow the rhythm of a ladder you already have - another design system's grays, a brand ramp, a palette from a screenshot. Pass the returned spec to create_palette or create_theme as `scales`. Never hand-write range/curve values. Not needed for the built-in presets ("even" | "material" | "tailwind" | "carbon") - name those in `scales` directly. </use_case> <important_notes> - Order the colors LIGHTEST FIRST (a 50-900 ladder already is). 3 minimum, 10 fits best. - The response reports how closel…

  • get_chart_series_colorsGet 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/highligh…

  • get_colorGet 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…

  • get_component_design_tokensGet 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", "a…

  • read_resourceRead Theming Resource

    Description is built at runtime.

  • set_roundnessSet 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-…

  • set_sizeSet 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 …

  • set_spacingSet 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 …

Compare and alternatives

    Featured in

    Signals

    Stars
    44
    Forks
    2
    Open issues
    32
    Contributors
    13
    Last commit
    Oct 22, 2026 (6 days ago)
    Last release
    Oct 22, 2026 (6 days ago)

    From GitHub (fetched Oct 24, 2026).

    Details

    Registry name
    io.github.IgniteUI/igniteui-theming
    Version
    30.0.0
    Auth
    No auth
    Packages
    npm igniteui-theming
    License
    MIT
    Repository
    github.com/IgniteUI/igniteui-theming
    Website
    github.com/IgniteUI/igniteui-theming#readme
    First seen
    Oct 24, 2026
    Last checked
    Oct 24, 2026
    Source
    Official MCP Registrygithub-graphql

    More from IgniteUI

    Cite this page

    Ignite UI Theming MCP Server. Agent Mart. https://agentmart.dev/connectors/igniteui-igniteui-theming (last updated 2026-10-24)