Styles and Themes

The Grid Lite 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"

Creating Custom Themes

Aside from the default themes shipped with the igniteui-grid-lite 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.

API References

Additional Resources

• Column Configuration
• Filtering
• Sorting

Our community is active and always welcoming to new ideas.

• Grid Lite GitHub