• An Angular project with

  igniteui-angular

  installed, or

  @infragistics/igniteui-angular

  for licensed users
• Sass support enabled in the project (default for Angular CLI projects)
• The Ignite UI Theming MCP server (

  igniteui-theming

  ) available as a tool provider

AGENT INSTRUCTION — MCP Server Setup (REQUIRED)

Before using any theming tools, you MUST verify the MCP server is available by calling

detect_platform

. If the tool is not available or the call fails, you MUST automatically configure it by following the setup process steps described below.

After writing the file, inform the user that the MCP server has been configured and they may need to reload the editor for the tools to activate. Start the MCP server and wait for that MCP server to start before continuing the theming related work. Do NOT skip this step or ask the user to do it manually.

• macOS:

  ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows:

  %APPDATA%\Claude\claude_desktop_config.json

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

1. Go to Settings → Tools → AI Assistant → MCP Servers
2. Click + Add MCP Server
3. Set Command to

   npx

   and Arguments to

   igniteui-theming igniteui-theming-mcp

4. Click OK and restart the AI Assistant

"Detect which Ignite UI platform my project uses"

detect_platform

package.json

angular

Docs: Theming Overview · Palette · Typography · Elevations

• Material (default) — Material Design 3
• Bootstrap — Bootstrap-inspired
• Fluent — Microsoft Fluent Design
• Indigo — Infragistics Indigo Design

$light-material-schema

$dark-fluent-schema

angular.json

"styles": ["node_modules/igniteui-angular/styles/igniteui-angular.css"]

Licensed package users: replace

igniteui-angular

with

@infragistics/igniteui-angular

in the path:

json

"styles": ["node_modules/@infragistics/igniteui-angular/styles/igniteui-angular.css"]

igniteui-angular.css

igniteui-angular-dark.css

igniteui-fluent-light.css

igniteui-fluent-dark.css

igniteui-bootstrap-light.css

igniteui-bootstrap-dark.css

igniteui-indigo-light.css

igniteui-indigo-dark.css

node_modules/igniteui-angular/styles/

node_modules/@infragistics/igniteui-angular/styles/

AGENT INSTRUCTION — Sass Theming Docs: If the user explicitly asks to build a Sass-based theme or configure Sass, refer to the dedicated Sass documentation:

• Sass Theming Overview
• Sass Configuration
• Sass Palettes
• Sass Component Themes

styles.scss

angular.json

// Open-source package
@use 'igniteui-angular/theming' as *;
// Licensed package — same Sass API, different import path
// @use '@infragistics/igniteui-angular/theming' as *;
$my-palette: palette(
  $primary: #1976D2,
  $secondary: #FF9800,
  $surface: #FAFAFA
);

// 2. Typography (optional)
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);

// 3. Core reset & base styles
@include core();

// 4. Apply theme
@include theme(
  $palette: $my-palette,
  $schema: $light-material-schema
);

$dark-palette: palette(
  $primary: #90CAF9,
  $secondary: #FFB74D,
  $surface: #121212
);

@include theme(
  $palette: $dark-palette,
  $schema: $dark-material-schema
);

Docs: Component Themes

tokens

AGENT INSTRUCTION — No Hardcoded Colors (CRITICAL)

Once a palette has been generated (via

palette()

in Sass or

create_palette

/

create_theme

via MCP), every color reference MUST come from the generated palette tokens — never hardcode hex/RGB/HSL values.

Use

var(--ig-primary-500)

,

var(--ig-secondary-300)

,

var(--ig-surface-500)

, etc. in CSS, or the

get_color

MCP tool to obtain the correct token reference.

WRONG (hardcoded hex — breaks theme switching, ignores the palette):

scss

$custom-avatar: avatar-theme(
  $background: #E91E63,
  $color: #FFFFFF
);

RIGHT (palette token — stays in sync with the theme):

scss

$custom-avatar: avatar-theme(
  $schema: $light-material-schema,
  $background: var(--ig-primary-500),
  $color: var(--ig-primary-500-contrast)
);

This applies to all style code: component themes, custom CSS rules, Sass variables used for borders/backgrounds/text, Angular

host

bindings, and inline styles. The only place raw hex values belong is the initial

palette()

call that seeds the color system. Everything downstream must reference the palette.

@use 'igniteui-angular/theming' as *;

$custom-avatar: avatar-theme(
  $schema: $light-material-schema,
  $background: var(--ig-primary-500),
  $color: var(--ig-primary-500-contrast)
);

igx-avatar {
  @include tokens($custom-avatar);
}

combo

grid

date-picker

select

date-picker

calendar

flat-button

input-group

1. Call

   get_component_design_tokens

   for the parent (e.g.,

   date-picker

   )
2. The response lists related themes and scope selectors
3. Call

   create_component_theme

   for each child, using the parent's selector as the wrapper

Docs: Display Density / Sizing

--ig-size

/* Global */
:root { --ig-size: 2; }

/* Component-scoped */
igx-grid { --ig-size: 1; }

Docs: Spacing

--ig-spacing

:root { --ig-spacing: 1; }
.compact-section { --ig-spacing: 0.75; }

IMPORTANT — File Safety Rule: When generating or updating theme code, never overwrite existing style files directly. Instead, always propose the changes as an update and let the user review and approve before writing to disk. If a

styles.scss

(or any target file) already exists, show the generated code as a diff or suggestion rather than replacing the file contents. This prevents accidental loss of custom styles the user has already written.

Tool: get_component_design_tokens
Params: { component: "grid" }

Tool: create_component_theme
Params: {
  platform: "angular",
  designSystem: "material",
  variant: "light",
  component: "grid",
  tokens: {
    "header-background": "var(--ig-primary-50)",
    "header-text-color": "var(--ig-primary-800)"
  }
}

Reminder: After a palette is generated, all token values passed to

create_component_theme

must reference palette CSS custom properties (e.g.,

var(--ig-primary-500)

,

var(--ig-secondary-A200)

,

var(--ig-gray-100)

). Never pass raw hex values like

"#E3F2FD"

.

get_color

Tool: get_color
Params: { color: "primary", variant: "600" }
→ var(--ig-primary-600)

Params: { color: "primary", variant: "600", contrast: true }
→ var(--ig-primary-600-contrast)

Params: { color: "primary", opacity: 0.5 }
→ hsl(from var(--ig-primary-500) h s l / 0.5)

• Component theme

  tokens

  values
• Custom CSS rules (

  color

  ,

  background

  ,

  border-color

  ,

  fill

  ,

  stroke

  , etc.)
• Sass variables for derived values (

  $sidebar-bg: var(--ig-surface-500);

  )
• Angular

  host

  style bindings

palette()

create_palette

create_theme

1. palette()

   call — the initial seed colors that generate the full palette

2. create_palette

   /

   create_theme

   MCP tool inputs — the base colors passed to the tool
3. Non-palette decorative values — e.g., a one-off SVG illustration color that intentionally stays fixed regardless of theme

var(--ig-<family>-<shade>)

1. Never overwrite existing files directly — always propose theme code as an update for user review; do not replace existing style files without confirmation
2. Always call

   detect_platform

   first when using MCP tools
3. Always call

   get_component_design_tokens

   before

   create_component_theme

   to discover valid token names
4. Palette shades 50 = lightest, 900 = darkest for all chromatic colors — never invert for dark themes (only gray inverts)
5. Surface color must match the variant — light color for

   light

   , dark color for

   dark

6. Use

   @include core()

   once before

   @include theme()

   in your global styles
7. Component themes use

   @include tokens($theme)

   inside a selector to emit CSS custom properties
8. For compound components, follow the full checklist returned by

   get_component_design_tokens

   — theme each child component with its scoped selector
9. Never hardcode colors after palette generation — once a palette is created, every color in component themes, custom CSS, and Sass variables must use

   var(--ig-<family>-<shade>)

   palette tokens (e.g.,

   var(--ig-primary-500)

   ,

   var(--ig-gray-200)

   ). Raw hex/RGB/HSL values are only acceptable in the initial

   palette()

   seed call. This ensures themes remain consistent, switchable (light/dark), and maintainable