/igniteui-blazor-theming

name: igniteui-blazor-theming
description: "Covers theming and visual customization for Ignite UI for Blazor: choosing and switching built-in themes (Bootstrap, Material, Fluent, Indigo - light and dark variants), customizing component appearance with CSS custom properties (design tokens), using the igniteui-theming MCP server to generate component themes and palettes, applying custom palettes, setting roundness/spacing/sizing tokens globally, dark mode switching, scoped component theming, and CSS parts. Use when users ask about changing the look and feel of Ignite UI Blazor components, applying a color scheme, generating CSS variables, using CSS parts, or customizing design tokens. Do NOT use for grid data features or component configuration - use igniteui-blazor-grids or igniteui-blazor-components instead."
user-invocable: true

Ignite UI for Blazor - Theming and Styling

Description

This skill teaches AI agents how to theme Ignite UI for Blazor applications using built-in CSS theme files, CSS custom properties, CSS shadow parts, and the **Ignite UI Theming MCP server**. It covers theme switching, palette generation, component-level design tokens, global layout tokens, and scoped CSS customization.

Prerequisites

• A Blazor project using Ignite UI for Blazor components
• A theme CSS file linked in the host page (see [`references/common-patterns.md`](./references/common-patterns.md))
• 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 any lightweight theming MCP tool. > This skill is already scoped to Ignite UI for Blazor, so use `platform: "blazor"` > in theming tool calls. If the theming 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

| Layer | Purpose | |---|---| | Built-in theme CSS | Baseline Bootstrap, Material, Fluent, or Indigo styling in light/dark variants | | Palette tokens | Global color CSS variables used across components | | Component design tokens | Component-scoped CSS custom properties generated or discovered with MCP | | CSS shadow parts | Fine-grained internal element styling only when the component doc lists supported parts | | Layout tokens | Global roundness, spacing, and size controls generated by MCP tools |

Ignite UI for Blazor theming in this skill is CSS-first. Agents should generate or edit CSS custom properties and selectors for normal app styling.

Built-In Themes

Use built-in theme CSS files for the baseline visual system. Supported design systems are Bootstrap, Material, Fluent, and Indigo, with light and dark variants.

Confirm exact file paths in [`references/common-patterns.md`](./references/common-patterns.md) before writing host-page markup. Only one built-in theme CSS file should be active at a time.

Color Palettes

Use `create_palette(platform: "blazor", output: "css", ...)` for a generated palette from seed colors. Use `create_custom_palette(platform: "blazor", output: "css", ...)` only when the user needs explicit control over individual shade values.

Palette CSS belongs in `:root` and must be loaded after the Ignite UI built-in theme CSS.

For simple palette references, use `get_color` instead of writing color variable names from memory:

get_color(color: "primary", variant: "600")

Use `contrast: true` when you need the matching text color token.

Raw color values are acceptable in the initial palette seed call. After the palette exists, component themes and custom CSS should use palette CSS custom properties wherever the desired color belongs to the theme.

Palette shades: chromatic shades use `50` as the lightest shade and `900` as the darkest shade. Do not invert chromatic colors for dark themes; only gray is inverted for dark variants.

Surface color must match the variant: use a light surface for `variant: "light"` and a dark surface for `variant: "dark"`.

Component-Level Theming

For component styling, first call `get_component_design_tokens(component: "...")`, then call `create_component_theme(platform: "blazor", component: "...", tokens: {...}, output: "css")` or write CSS using the returned token names. Do not use `overrides`; the MCP argument is `tokens`.

For components with variants, query the exact variant whenever possible. For example, use `contained-button`, `flat-button`, `outlined-button`, or `fab-button` instead of generic `button` before generating a component theme.

Use palette token references such as `var(--ig-primary-500)` and `var(--ig-primary-500-contrast)` after a palette has been established. Do not pass raw hex/RGB/HSL values to component theme tokens unless the value is intentionally outside the theme palette.

For CSS parts, call the component's Blazor `get_doc` entry first. Do not say a component exposes CSS parts unless the Blazor doc confirms the exact part names.

Discovering Available Tokens

Each component has its own set of design tokens. Before theming a component, call `get_component_design_tokens` and use only token names returned by the tool.

Compound Components

Some components are compound and may involve internally themed child components. When `get_component_design_tokens` returns compound gu