igniteui-react-customize-theme

Ignite UI for React — Theming

How the palette actually works

Every palette role (primary, secondary, surface, gray, info, success, warn, error) exposes shades 50–900 plus a -contrast variant per shade. Shades other than 500 are derived from 500 via relative color functions — the theme CSS defines them as hsl(from var(--ig-primary-500) h calc(s * …) calc(l * …)).

So to rebrand, override the 500 shade and everything else follows:

/* src/index.css — imported AFTER the theme CSS */
:root {
  --ig-primary-500: #0d6efd;
  --ig-secondary-500: #ff9800;
}

There are no --ig-primary-h / -s / -l tokens. Writing them is a silent no-op — a common and hard-to-spot mistake. The same applies to --ig-surface-h, --ig-gray-h, and every other -h/-s/-l name.

Always reference palette tokens rather than literals in your own CSS: var(--ig-primary-500), var(--ig-primary-500-contrast) for text on top of it. 50 is lightest, 900 darkest.

Order matters

// main.tsx
import 'igniteui-webcomponents/themes/light/bootstrap.css'; // theme
import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; // grid theme, if using grids
import './index.css'; // your overrides — last

Design systems: bootstrap (default), material, fluent, indigo; each in light and dark.

Global layout knobs

:root {
  --ig-size: 2;          /* 1 small, 2 medium, 3 large */
  --ig-spacing: 1;       /* 0.5 compact … 2 spacious; also -inline / -block variants */
  --ig-radius-factor: 1; /* 0 square … 1 fully rounded */
}

All three cascade, so they scope to a subtree or a single element: igc-button { --ig-size: 1; }.

Component-level overrides

Selectors target the rendered element, never the React name:

igc-avatar {
  --ig-avatar-background: var(--ig-primary-500);
  --ig-avatar-color: var(--ig-primary-500-contrast);
}

igc-input::part(input) { font-size: 1.1rem; }   /* ::part() reaches shadow DOM internals */