Themes in Ignite UI for Web Components

Ignite UI for Web Components 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-webcomponents/themes/light/bootstrap.css
Material	Light	igniteui-webcomponents/themes/light/material.css
Fluent	Light	igniteui-webcomponents/themes/light/fluent.css
Indigo	Light	igniteui-webcomponents/themes/light/indigo.css
Bootstrap	Dark	igniteui-webcomponents/themes/dark/bootstrap.css
Material	Dark	igniteui-webcomponents/themes/dark/material.css
Fluent	Dark	igniteui-webcomponents/themes/dark/fluent.css
Indigo	Dark	igniteui-webcomponents/themes/dark/indigo.css

Runtime Theme Switching

[!Note] Changing the theme at runtime also requires you to replace the global stylesheet from the table above.

Ignite UI for Web Components allows you to switch the component themes at runtime by using the ConfigureTheme function exported by the library.

Calling it and passing one of the four valid themes - bootstrap, material, fluent, or indigo as a string will change the loaded component styles;

import { configureTheme } from "igniteui-webcomponents";

// Sets material as the theme to be used by all components
configureTheme("material");

[!Note] This only tells components to switch their internal styles to the desired theme, you should also switch the global theme file to one of the listed files above.

API References

• ConfigureTheme