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)

Ignite UI Theming MCP Server (recommended, not required)

The igniteui-theming MCP server generates production-ready theme code (create_theme, create_palette, create_component_theme, get_component_design_tokens, get_color, and more). When its tools are available, prefer them over writing theme Sass from memory — start by calling detect_platform.

If the tools are not available, do not block the task — use the manual Sass workflow in this file. Suggest that the user run npx -y igniteui-cli ai-config from the project root (it configures both the igniteui-cli and igniteui-theming MCP servers) and reload the editor. MCP servers cannot be started mid-session; the configuration takes effect on the next session. Editor-specific details are in references/mcp-setup.md.

Theming Architecture