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 |
API References
ConfigureTheme