Configuration
The Ignite UI for Angular theming library exposes several input arguments variables that let you configure how the theming engine works.
Global Variables
Here’s a list of global Sass variables forwarded in the main theming module:
| Variable Name | Description |
|---|---|
$components | Stores a register of all component themes. Used for tree-shaking. |
$dropped-themes | Stores a register of dropped themes. Used for tree-shaking. |
Scrollbar Styling
The Ignite UI for Angular themes ship with custom scrollbar styles that allow you to change the width and/or the colors of all scrollbars in your application. To apply the included styles, make sure to set the ig-scrollbar class to an element that contains your root app component.
To customize the scrollbar further, you can create a new scrollbar style with the scrollbar-theme function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height… and many more.
// app.component.scss
// Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green
$my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green);
// We use 'tokens' mixin for generating the css variables with the new scrollbar values.
:host {
@include tokens($my-scrollbar-theme);
}Additional Resources
Learn the concepts:
Learn how to create application-wide themes:
Learn how to create component-specific themes:
Our community is active and always welcoming to new ideas.