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.