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