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
Name | Type | Default | Description |
---|---|---|---|
$print-layout |
boolean | true | Include/exclude the styles for printing. |
$enhanced-accessibility |
boolean | false | Switches component colors and other properties to more accessible values. |
Theme mixins
Name | Type | Default | Description |
---|---|---|---|
$palette |
map | null |
The palette map to be used to by the default themes of all components. |
$schema |
map | $light-material-schema |
The schema used as basis for styling the components. |
$exclude |
list | () |
A list of component themes to be excluded from the global theme. |
$roundness |
Number | null |
Sets the global roundness factor for all components (the value can be any decimal fraction between 0 and 1). |
$elevation |
boolean | true |
Turns on/off elevations for all components in the theme. |
$elevations |
Map | $material-elevations |
The elevation map to be used by all component themes. |
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);
scss
Let's explain what the core
and theme
mixins do. The core
mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The theme
mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the $exclude
list of components.
Including core
before theme
is essential. The core
mixins provide all base definitions needed for the theme
mixin to work correctly.
Excluding Components
The theme
mixin allows you to provide a list of component names to be excluded from the global theme styles. For instance, if you want to completely remove all styles we include for the igx-avatar
and igx-badge
to reduce the amount of produced CSS or to supply your own custom styles, you can do so by passing the list of components like so:
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
scss
If you know your app will not be using some of our components, we recommend you add them to the $exclude
list.
You can do the inverse, i.e. include only the component styles 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)
);
scss
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,
);
scss
Dark
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $dark-material-schema,
$palette: $dark-material-palette,
);
scss
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.
Theme | Schema | Color Palette |
---|---|---|
Material Light | $light-material-schema |
$light-material-palette |
Material Dark | $dark-material-schema |
$dark-material-palette |
Fluent Light | $light-fluent-schema |
$light-fluent-palette $light-fluent-excel-palette $light-fluent-word-palette |
Fluent Dark | $dark-fluent-schema |
$dark-fluent-palette $dark-fluent-excel-palette $dark-fluent-word-palette |
Bootstrap Light | $light-bootstrap-schema |
$light-bootstrap-palette |
Bootstrap Dark | $dark-bootstrap-schema |
$dark-bootstrap-palette |
Indigo Light | $light-indigo-schema |
$light-indigo-palette |
Indigo Dark | $dark-indigo-schema |
$dark-indigo-palette |
Additional Resources
Learn how to create individual component themes:
Our community is active and always welcoming to new ideas.