Configuration

    The Ignite UI for Angular theming library provides several global 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($default-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.

    Default Palette

    Another global variable is $default-palette. It is implicitly set when you pass a palette to the theme mixin. This variable sets the palette to be used by default by theming functions and mixin when a palette is not explicitly provided.

    For instance, the igx-color function may not be called with a specific palette in which case the value assigned to $default-palette will be used to retreive the color.

    You can change the default palette at any time by shadowing its declaration:

    $my-palette: palette(
      $primary: red, 
      $secondary: blue
    );
    
    // Sets the global $default-palette variable 
    // the value stored in $my-palette
    @include theme(
      $palette: $my-palette
    );
    

    Now, we can assign $my-palette to $default-palette and store it in our _variables.scss file. Then pass either $default-palette or $my-palette to the theme mixin:

    // _variables.scss
    
    $legacy-support: true; /* not supported in Ignite UI for Angular 13 */
    
    $my-palette: palette(
      $primary: red, 
      $secondary: blue
    );
    
    $default-palette: $my-palette;
    $igx-legacy-support: $legacy-support;
    
    @use 'variables' as *;
    
    @include theme(
      $palette: $my-palette,
      $legacy-support: $legacy-support
    );
    

    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.
    $keyframes Stores a register of all keyframe animation mixins. 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 igx-scrollbar class to an element that contains your root app component.

    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.