Configuration

    The Ignite UI for Angular theming library exposes several input arguments variables that let you configure how the theming engine works.

    Legacy Support

    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 theme mixin.

    Warning

    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.

    Example:

    // Sets the global $igx-legacy-support variable to true
@include theme(
  $legacy-support: 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.

    // app.component.scss
$igx-legacy-support: true;

$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.

    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 theme that extends the existing scrollbar-theme and accepts the $schema, $thumb-background, $track-background and the $scrollbar-size parameters.

    // app.component.scss
$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);

@include scrollbar($my-scrollbar-theme);

    The parameters can also be directly applied to the scrollbar function to prevent the creation of additional themes.

    // app.component.scss
@include scrollbar(scrollbar-theme($scrollbar-size: 16px));

    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.