/igniteui-angular-theming

name: igniteui-angular-theming
description: "Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead."
user-invocable: true

Ignite UI for Angular — Theming Skill

Description

This skill teaches AI agents how to theme Ignite UI for Angular applications using the Sass-based theming system and the **Ignite UI Theming MCP server**. It covers global themes, palettes, typography, elevations, component-level theming, layout controls (spacing, sizing, roundness), and how to use the MCP tools for code generation.

Prerequisites

• 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.

Setting Up the Theming MCP Server

> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.

Theming Architecture

> **Docs:** [Theming Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index) · [Palette](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/palettes) · [Typography](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography) · [Elevations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/elevations)

The Ignite UI theming system is built on four pillars:

| Concept | Purpose | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 | | **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) | | **Elevations** | Box-shadow levels 0–24 for visual depth | | **Schema** | Per-component recipes mapping palette colors to component tokens |

Design Systems

Four built-in design systems are available:

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

Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`).

Pre-built Themes

The quickest way to theme an app is to include a pre-built CSS file in `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"] > ```

Available pre-built CSS files:

| File | Theme | | ------------------------------ | --------------- | | `igniteui-angular.css` | Material Light | | `igniteui-angular-dark.css` | Material Dark | | `igniteui-fluent-light.css` | Fluent Light | | `igniteui-fluent-dark.css` | Fluent Dark | | `igniteui-bootstrap-light.css` | Bootstrap Light | | `igniteui-bootstrap-dark.css` | Bootstrap Dark | | `igniteui-indigo-light.css` | Indigo Light | | `igniteui-indigo-dark.css` | Indigo Dark |

All files are located under `node_modules/igniteui-angular/styles/` (or `node_modules/@infragistics/igniteui-angular/styles/` for the licensed package).

Custom Sass Theme (Manual)

> **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](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index) > - [Sass Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/configuration) > - [Sass Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) > - [Sass Component Themes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/component-themes)

Create a `styles.scss` file and include it in `angular.json`:

// Open-source package
@use 'igniteui-angular/theming' as *;
//