Custom Theme for Angular Material Components Series: Part 3 — Apply Theme
By: Dharmen Shah
Tags: Angular Cli, Angular Material, Angular, Custom Material Theme, Angular Material Theme

Let’s Start Photo by Jon Tyson on Unsplash

1. Understand theme of MatToolbar

Now as you know, how each components theme is included in our application, let’s move ahead and see MatToolbar ’s theme, src/lib/toolbar/_toolbar-theme.scss :

Look at line 31, they have created a mixin called mat-toolbar-theme . In this mixin, first they are fetching all theme colors using palette functions. Then, default background and font-colors are assigned. For each themed toolbar, they are creating classes .mat-primary , .mat-accent and .mat-warn . In those classes, they are calling a mixin _mat-toolbar_color (which is defined at lines 6–9). That mixin is responsible for assigning background and font colors based on theme color.

You can go through each component’s theme file and see how they’re created. Ok, so now we know how MatToolbar ’s theme is created. Let’s apply it to MatSidenav and MatDialog .

2. Apply MatToolbar ’s theme to MatSidenav and MatDialog

MatToolbar

As you know (if not read this), MatToolbar has an attribute/property called color that’s the reason, when we directly call color="primary" (or [color]=”themeColor” in our application) it applies the respective theme. But, color attribute is not there for MatSidenav . So, we would need to handle that.

Let’s open up our project and go to file: src/app/shared/components/sidenav/sidenav.component.html :

To really check if MatSidenav supports color attribute or not, you can try by adding color="primary" in line 5. You will nothing changed in the output. To actually see the error, change it to [color]=”themeColor” . You will see the error in browser console: Error: Template parse errors: Can’t bind to ‘color’ since it isn’t a known property of ‘mat-sidenav’ . So, to assign themeColor to color attribute of MatSidenav , we can do the Attribute Binding. Change the line 5 to below:

<mat-sidenav #sidenav mode="side" opened [attr.color]="themeColor">

</mat-sidenav>

You can set the value of an attribute directly with an attribute binding. You must use attribute binding when there is no element property to bind. You can read more about the same at Attribute Binding Guide.

As you would see, attribute biding won’t cause any errors, but as we haven’t done anything related to styling, it won’t make any difference to the output. Let’s do that.

For custom component theme, we will follow this naming convention: <component-name>.scss-theme.scss . Let’s create a stylesheet at: src/app/shared/components/sidenav/sidenav.component.scss-theme.scss :

As you can see, we are importing ~@angular/material/theming , so that we can use some basic Material mixins, like map-get, mat-color and MatToolbar ’s colored mixin _mat-toolbar-color . We are creating a mixin called sidenav-component-theme to handle our SidenavComponent ’s theme. In our mixin, we are first fetching all theme colors using map-get . Then, in class .mat-sidenav , which is applied to <mat-sidenav> tag, we are giving MatToolbar default theme and then colored themes to color attributes. Now, we need to include sidenav-component-theme mixin somewhere.

Let’s include it in src/custom-component-themes.scss :