Global Themes

Overview

If you’ve included the igniteui-angular.css file in your application project, now is a good time to remove it. We are going to use our own my-app-theme.scss file to generate a global theme for all components in our application.

Ignite UI for Angular uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. To generate a global theme we’re going to be including two mixins core and theme. Both of those mixins accept a few arguments:

Core mixin

Theme mixins

Let’s create a custom global theme that will use the primary, secondary and surface colors of our company.

// Import the theming module
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #2ab759;
$secondary-color: #f96a88;
$surface-color: #fff;

$my-color-palette: palette(
    $primary: $primary-color,
    $secondary: $secondary-color,
    $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);

The core() mixin configures shared infrastructure such as sizing, spacing, enhanced accessibility, global directive styles, and print styles. The theme() mixin emits the palette, elevations, theme metadata, and component token declarations for the selected schema. Component structural styles are not generated by theme() as of 22.1.0; they ship in each component bundle and are tree-shaken automatically.

Excluding Components

The theme mixin allows you to provide a list of component names to be excluded from the global theme’s token output. For instance, if you want to remove the tokens we generate for igx-avatar and igx-badge because you know your application will never use them, you can do so by passing the list of components like so:

// ...
$unnecessary: (igx-avatar, igx-badge);

@include theme($my-color-palette, $exclude: $unnecessary);

If you know your app will not use some components, you can add them to $exclude to omit their token declarations. This does not control structural CSS; unused component bundles are already removed by the application build.

You can do the inverse and emit tokens only for the components you want using the method below:

@use 'sass:map';

@function include($items, $register) {
    @return map.keys(map.remove($register, $items...));
}

$allowed: (igx-avatar, igx-badge);

@include theme(
    $exclude: include($allowed, $components)
);

Third-party Resets

Ignite UI declares its layers in the order ig.reset → ig.base → the active design-system layer → ig.derived. Wrap third-party reset or normalize stylesheets in the lowest-precedence ig.reset layer:

@layer ig.reset {
  @import "minireset.css";
}

Unlayered application styles continue to take precedence over Ignite UI’s layered styles.

Light and Dark Themes

We also provide light and dark versions for our four themes - Material, Fluent, Indigo, Bootstrap.

To use any of the versions, you would simply need to pass it to our theme mixin:

Light

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $light-material-schema,
    $palette: $light-material-palette,
);

*Dark_

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $dark-material-schema,
    $palette: $dark-material-palette,
);

Available Themes

Ignite UI for Angular gives you the option to pick from a set of predefined themes. The table below shows all the built-in themes that you can use right away.

Additional Resources

Learn how to create individual component themes:

• Component Themes

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub