Apex Grid Styles and Themes

The Apex grid comes with four distinct themes - Bootstrap, Material, Fluent and Indigo. The grid and its UI components have the themes baked in, but the component requires a global stylesheet for palettes, typography and other global configurations to work.

Loading a base themes

Depending on your project type, setup and build configuration the method of how to include one of the files below will vary. If you are using a framework/build tool refer to its documentation on how to add external styles to your output bundle.

As a rule of thumb, you can always copy the themes folder to your assets directory and link the theme from there in your index.html.

<link rel="stylesheet" href="./assets/themes/light/bootstrap.css"

Theme	Variant	Path
Bootstrap	Light	node_modules/igniteui-webcomponents/themes/light/bootstrap.css
Bootstrap	Dark	node_modules/igniteui-webcomponents/themes/dark/bootstrap.css
Material	Light	node_modules/igniteui-webcomponents/themes/light/material.css
Material	Dark	node_modules/igniteui-webcomponents/themes/dark/material.css
Fluent	Light	node_modules/igniteui-webcomponents/themes/light/fluent.css
Fluent	Dark	node_modules/igniteui-webcomponents/themes/dark/fluent.css
Indigo	Light	node_modules/igniteui-webcomponents/themes/light/indigo.css
Indigo	Dark	node_modules/igniteui-webcomponents/themes/dark/indigo.css

In the sample below, you can preview all the default base themes.

Creating custom themes

Aside from the default themes shipped with the Apex grid package, you can also create and modify your own to match your project identity and branding.

Refer to the Ignite UI theming package wiki for documentation and usage of both the SCSS and CSS interfaces.

@use 'node_modules/igniteui-theming' as *;

// Our dark theme
$my_dark_palette: palette(
  $primary: #dab785,
  $secondary: #d5896f,
  $surface: #031d44,
  $gray: #04395e,
);

// Our light theme
$my-light-palette: palette(
  $primary: #c1292e,
  $secondary: #f1d302,
  $surface: #fdfffc,
  $gray: #235789,
);

.custom-light {
  @include palette($my_light_palette);
  @include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale);
}

.custom-dark {
  @include palette($my_dark_palette);
  @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale);
}

Here is an example showcasing the custom theming from above.