Using our custom themes

Great, we defined our custom theme but that doesn’t do anything by itself. Next step is to include our custom theme in main style file of our application (usually styles.scss ).

Using custom theme in our application

Using specific css class for single theme is not necessary per se but it will help us when adding additional themes

Adding multiple custom themes

To use multiple themes we simply need to import additional themes and create respective css classes for each theme.

Use multiple custom themes

Theme class and overlay handling

Depending on our particular use case we might need to implement some dynamic css class switching (with [class] ) to enable user to switch themes using application preferences during runtime or use parametrized build (eg: define variable in webpack) to build our application using desired theme by adding correct css class to the <body> tag during build.

Angular Material contains components like dropdown or dialog which create overlay over the application's default layout, to theme these elements we have to set theme class also on the overlayContainer .

Setting theme on the overlayContainer of Angular Material during runtime

Cool our application now supports use of potentially unlimited number of different themes🎨🌈. This is useful in itself but these themes will only style components provided by the Angular Material library itself. While there are quite some components available (and even more are waiting in the pipeline for the future releases) almost no application can do without implementing some custom components.

Follow me on Twitter to get notified about the newest blog posts and interesting frontend stuff

Theming our custom components

Let’s say we are going to implement our own custom “big input” component in shared module. Using @angular/cli we will execute command which will look something like ng generate component shared/big-input --module shared.module . This will generate component, template and style files. We will put our general layout and styling to the big-input.component.scss but we will also create new file big-input.component.scss-theme.scss where we will use style rules which have anything to do with color.

While <component-name>.component.scss-theme.scss is not official naming convention, I found it very helpful because IDE will put original styles file and theme file next to each other based on default alphabetical ordering.

The custom component theme file then will look something like this…

Styling custom component using theme variables

In our mixin, we retrieved all the available theme variables to demonstrate what is possible but in real project we should only retrieve what is necessary…

These variables then contain many sub-values based on the variable type. $primary , $accent and $warn variables contain reference to the whole palette as we defined in our custom theme definition in the beginning of article.

Retrieving color

We can retrieve particular colors using mat-color function. We can select default, lighter and darker shades (eg: mat-color($primary, lighter) ) as defined by our theme or even any available color of the palette when necessary ( mat-color($primary, A200) ).

Contrast colors

It can be useful to retrieve appropriate contrast color when using main color as a background for some component which also contains text. In that case we can retrieve corresponding contrast color, eg: mat-color($primary, lighter-contrast) for backgrounds which mat-color($primary, lighter) .

Foreground and background color sub-values