The development of Ignite UI for Angular started back in 2016 when Internet Explorer 11 was still relevant. Some of our users depend on IE11 to this day. Our theming engine was built in a way that allows you to produce styles for ever-green and old browsers alike, using the same API. We allow you to configure how the engine behaves based on a single global variable -
$igx-legacy-support. By default, it is set to
false, but you can shadow its declaration. The value of this variable is also implicitly set when you specify the
$legacy-support parameter on the
$legacy-support option was removed in igniteui-angular 13.0.x. Support for IE11 and legacy browsers was removed in version 13 and this option is no longer valid.
// Sets the global $igx-legacy-support variable to true
This is the default way to turn off legacy support for the theme you're building in your
styles.scss file. If you have styles scoped to specific components, like the
app.component.scss file, you will have to specify the legacy support there as well.
$color: color($light-material-palette, 'primary', 900);
We recommend you create a
_variables.scss file in the
styles directory of your project where you store all of your global configuration variables. In this way, you can simply import your configuration in every style file.
Here's a list of global Sass variables forwarded in the main theming module:
|Stores a register of all component themes. Used for tree-shaking.
|Stores a register of dropped themes. Used for tree-shaking.
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 theme that extends the existing
scrollbar-theme and accepts the
$track-background and the
$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);
The parameters can also be directly applied to the scrollbar function to prevent the creation of additional themes.
@include scrollbar(scrollbar-theme($scrollbar-size: 16px));
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.