/igniteui-wc-customize-component-theme

name: igniteui-wc-customize-component-theme
description: Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming
user-invocable: true

Ignite UI Web Components — Theming Skill

Description

This skill teaches AI agents how to theme Ignite UI Web Components (and React via `igniteui-react`) applications. Two approaches are supported:

• **CSS custom properties** — works in any project without additional build tooling
• **Sass** — available when the project has Sass configured; provides the full palette/typography/elevation API

The skill also covers component-level theming, layout controls (spacing, sizing, roundness), and how to use the **Ignite UI Theming MCP server** for AI-assisted code generation.

Prerequisites

• A project with `igniteui-webcomponents` (or `igniteui-react`) installed
• The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider
• **Optional**: Sass configured in the project (enables the Sass-based theming API)

> **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

The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.

VS Code

Create or edit `.vscode/mcp.json` in your project:

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

This works whether `igniteui-theming` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.

Cursor

Create or edit `.cursor/mcp.json`:

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

Claude Desktop

Edit the Claude Desktop config file:

• **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"]
    }
  }
}

WebStorm / JetBrains IDEs

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

Verifying the Setup

After configuring the MCP server, ask your AI assistant:

> "Detect which Ignite UI platform my project uses"

If the MCP server is running, the `detect_platform` tool will analyze your `package.json` and return the detected platform (e.g., `webcomponents`).

Theming Architecture

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 import a pre-built CSS file in your entry point:

import 'igniteui-webcomponents/themes/light/bootstrap.css';

Available pre-built CSS files:

| Import path | Theme | |---|---| | `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light | | `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark | | `igniteui-webcomponents/themes/light/material.css` | Material Light | | `igniteui-webcomponents/themes/dark/material.css` | Material Dark | | `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light | | `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark | | `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light | | `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |

Custom Theme via CSS Custom Properties

> No Sass required. Works in any project after importing a pre-built theme.

After importing a pre-built theme, override individual design tokens with CSS custom properties on `:root` or a scoped selector:

:root {
  /* Override palette hue/saturation/lightness channels */
  --ig-primary-h: 211deg;
  --ig-primary-s: 100%;
  --ig-primary-l: 50%;

  --ig-secondary-h: 33deg;
  --ig-secondary-s: 100%;
  --ig-secondary-l: 50%;
}

To scope overrides to a specific container:

.admin-panel {
  --ig-primary-h: 260deg;
  --ig-primary-s: 60%;
  --ig-primary-l: 45%;
}

For dark mode, either import a dark theme CSS file directly or toggle overrides with a class or media query:

@media (prefers-color-scheme: dark) {
  :root {
    --ig-surface-h: 0deg;
    --ig-surface-s: 0%;
    --ig-surface-l: 7%;
  }
}

/* Or manually with a class */
.dark-theme {
  --ig-surface-h: 0deg;
  --ig-surface-s: 0%;
  --ig-