Themes in Ignite UI for React
Ignite UI for React ships with four distinct themes - Bootstrap, Material, Fluent, and Indigo. All component themes are baked into the components, however, a global style file is required for palettes, typography, and other global configurations to work.
Loading a Theme
To enable a theme, a theme file should be loaded. Depending on your project configuration you can either import or link.
Here’s the complete list of all bundled themes and their path:
| Name | Variant | Location |
|---|---|---|
| Bootstrap | Light | igniteui-react-grids/grids/themes/light/bootstrap.css |
| Material | Light | igniteui-react-grids/grids/themes/light/material.css |
| Fluent | Light | igniteui-react-grids/grids/themes/light/fluent.css |
| Indigo | Light | igniteui-react-grids/grids/themes/light/indigo.css |
| Bootstrap | Dark | igniteui-react-grids/grids/themes/dark/bootstrap.css |
| Material | Dark | igniteui-react-grids/grids/themes/dark/material.css |
| Fluent | Dark | igniteui-react-grids/grids/themes/dark/fluent.css |
| Indigo | Dark | igniteui-react-grids/grids/themes/dark/indigo.css |
Customizing with Sass
The theme files above are prebuilt CSS, and the topics in this section customize them by overriding CSS variables - see Palettes, Typography, Elevations, and Configuration. That path needs no build configuration and covers most customization.
Some capabilities are only reachable from Sass, because they run at compile time rather than through a variable. The contrast and chart-palette functions on the Accessibility topic are the main example. To use them, install igniteui-theming and import it:
@use 'igniteui-theming' as *;
// Required for $material-type-scale, $indigo-type-scale, and similar preset variables
@use 'igniteui-theming/sass/typography/presets' as *;
// Required for $material-elevations and $indigo-elevations
@use 'igniteui-theming/sass/elevations/presets' as *;If @use 'igniteui-theming' as *; does not resolve, your Sass compiler is missing node_modules in its load paths. Set css.preprocessorOptions.scss.loadPaths in Vite, or sassOptions.loadPaths in Next.js.