Custom Theme for Angular Material Components Series: Part 3 — Apply Theme
Tags: angular, material, theme, scss
Published: 2020-04-04 18:12:45

---
title: Custom Theme for Angular Material Components Series: Part 3 — Apply Theme
published: true
description: Apply Theme to Angular Material and its different Components. 😎
tags: angular, material, theme, scss
series: Custom Theme for Angular Material Components
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fg8sgds9h8k2qz9iwt34.jpg
---

> _Updated version of this article is present at: [angular-material.dev](https://angular-material.dev/articles/angular-material-theming-system-complete-guide)_

<i>Apply Theme to Angular Material and its different Components. 😎</i>

## Summary

This is the third article of Custom Theme for Angular Material Components Series. In previous articles, we understood how Angular Material’s and its components' themes work.

{% post https://dev.to/shhdharmen/custom-theme-for-angular-material-components-series-part-1-create-a-theme-1ba5 %}

{% post https://dev.to/shhdharmen/custom-theme-for-angular-material-components-series-part-2-understand-theme-aa2 %}

In this article we will proceed to modify default theme of components. Below is what we will be doing:

1. Understand theme of `MatToolbar`
2. Apply `MatToolbar`'s theme to `MatSidenav` and `MatDialog`
3. Create a different theme for `MatSnackbar` and nice styling for different kind of notifications (default, info, success, warning, error)

---

![Start](https://dev-to-uploads.s3.amazonaws.com/i/2mwmae4pl7rivvt8wipf.jpg)

## 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/material/toolbar/_toolbar-theme.scss](https://github.com/angular/components/blob/master/src/material/toolbar/_toolbar-theme.scss)*:

{% gist https://gist.github.com/shhdharmen/f37a7644130db60a0beabbaca1058b69 %}

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`

### `MatSidenav`

As you know (if not [read this](https://material.angular.io/components/toolbar/api#MatToolbar)), `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* :

![src/app/shared/components/sidenav/sidenav.component.html](https://dev-to-uploads.s3.amazonaws.com/i/9jwc69o7616nu3kcqlji.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/f53e60cfdedfd911e26e18ae38df4367e4db71e8/src/app/shared/components/sidenav/sidenav.component.html">src/app/shared/components/sidenav/sidenav.component.html</a></figcaption>

To really check if `MatSidenav` supports color attribute or not, you can try by adding `color="primary"` in `mat-sidenav` tag. You will see 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 it like below:

![src/app/shared/components/sidenav/sidenav.component.html](https://dev-to-uploads.s3.amazonaws.com/i/lgn3stgs9qjldojpsvse.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/components/sidenav/sidenav.component.html">src/app/shared/components/sidenav/sidenav.component.html</a></figcaption>

> *__ℹ️ Pro Tip:__ 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](https://angular.io/guide/template-syntax#attribute-binding).*

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* :

![src/app/shared/components/sidenav/sidenav.component.scss-theme.scss](https://dev-to-uploads.s3.amazonaws.com/i/zy7vvdwxcwvtvh7d27kn.png)
<figcaption>I would recommend that you write the code by yourself, but if you want to copy paste, please visit my file on the <a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/components/sidenav/sidenav.component.scss-theme.scss">repo</a>.</figcaption>

As you can see, we are importing `~@angular/material/theming`, so that we can use some basic Material mixins, like `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*:

![src/custom-component-themes.scss](https://dev-to-uploads.s3.amazonaws.com/i/1wzbrjtunzi0jdk2n10u.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/custom-component-themes.scss">src/custom-component-themes.scss</a></figcaption>

Let's run the project: `ng serve -o` and you should see the output like below:

![MatSidenav themeColor output](https://dev-to-uploads.s3.amazonaws.com/i/bfr16gqvrg0ffqjdn6wl.png)
<figcaption>themeColor = "primary" | "accent" | "warn"</figcaption>

Hooray… 🎉🎉🎉 We have applied same theme as `MatToolbar` to `MatSidenav`.

![Hooray](https://dev-to-uploads.s3.amazonaws.com/i/8j6k1fbw4a522y58uk3k.gif)

### `MatDialog`

First, let's import `MatDialogModule` in `CustomMaterialModule`:

![src\app\custom-material\custom-material.module.ts](https://dev-to-uploads.s3.amazonaws.com/i/0pv4tx676klys32cfaj9.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/custom-material/custom-material.module.ts">src\app\custom-material\custom-material.module.ts</a></figcaption>

Then, create a component using terminal command: `ng g c shared/components/dialog`:

![src\app\shared\components\dialog\dialog.component.html](https://dev-to-uploads.s3.amazonaws.com/i/txkrssqjbxkzncd5xklg.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/components/dialog/dialog.component.html">src\app\shared\components\dialog\dialog.component.html</a></figcaption>

Note that we have added `[attr.color]="data.themeColor"` in `h2[mat-dialog-title]`. That will help us to apply dynamic theme to header.

![src\app\shared\components\dialog\dialog.component.ts](https://dev-to-uploads.s3.amazonaws.com/i/mengftgixac9nz3cs5l0.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/components/dialog/dialog.component.ts">src\app\shared\components\dialog\dialog.component.ts</a></figcaption>

Class file is pretty straight-forward. We are injecting `data` using `MAT_DIALOG_DATA`, this will be coming from where we make a function to open the dialog.

We will also create a theme file for dialog at : *src/app/shared/components/dialog/dialog.component.scss-theme.scss*.

We have to make some adjustments to make `mat-dialog-title` take some spacing, so that background color is nicely visible. Also note that we have created a class `.custom-dialog`, we will use this when creating dialog.

![src/app/shared/components/dialog/dialog.component.scss-theme.scss](https://dev-to-uploads.s3.amazonaws.com/i/2fd1v80vgovmuvpa7tkw.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/components/dialog/dialog.component.scss-theme.scss">src/app/shared/components/dialog/dialog.component.scss-theme.scss</a></figcaption>

We have to include this theme in our *src/custom-component-themes.scss*:

![src/custom-component-themes.scss](https://dev-to-uploads.s3.amazonaws.com/i/shz8bir11uyfp9dsrd6y.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/custom-component-themes.scss">src/custom-component-themes.scss</a></figcaption>

### `AppComponent`

First, import `MatButtonModule` in `CustomMaterialModule`:

![src/app/custom-material/custom-material.module.ts](https://dev-to-uploads.s3.amazonaws.com/i/ozlxlf7xjyzmya6u9b2r.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/custom-material/custom-material.module.ts">src/app/custom-material/custom-material.module.ts</a></figcaption>

Let's open `MatDialog` from *app.component.html*. Just change the content to:

![src/app/app.component.html](https://dev-to-uploads.s3.amazonaws.com/i/m9gugc9rt2gzk1izmz9m.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/app.component.html">src/app/app.component.html</a></figcaption>

We also need to add a function `openDialog` in *app.component.ts*:

![src/app/app.component.ts](https://dev-to-uploads.s3.amazonaws.com/i/dmok4awprdkqsf3q7eoy.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/app.component.ts">src/app/app.component.ts</a></figcaption>

Note that, we have created `themeColor` property and used the same in HTML and in creation of dialog. Also note the use of `panelClass: 'custom-dialog'` , this class we have created in dialog theme file.

Let’s look at the output:

![MatToolbar themeColor output](https://dev-to-uploads.s3.amazonaws.com/i/k455lz3zr0frs9wsrhez.png)

It’s looking great, isn’t it!!??

## 3. Create a different theme for `MatSnackbar` and create nice styling for different kind of notifications (default, info, success, warning, error)

First, import `MatSnackBarModule` in `CustomMaterialModule`:

![src/app/custom-material/custom-material.module.ts](https://dev-to-uploads.s3.amazonaws.com/i/3d6qpzjucqzvhzzfi8nt.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/custom-material/custom-material.module.ts">src/app/custom-material/custom-material.module.ts</a></figcaption>

Then, let's create a notification service, which will help us to call notifications from anywhere in the application:

```bash
ng g s shared/services/notification
```

We will change the content of service to below:

![src/app/shared/services/notification.service.ts](https://dev-to-uploads.s3.amazonaws.com/i/feqzfriae654tl9hvyxd.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/services/notification.service.ts">src/app/shared/services/notification.service.ts</a></figcaption>

Note the use of `panelClass`. For each type of notification, we are adding different `panelClass`, which will help us in styling.

Next, create a style theme file: *src\app\shared\services\notification.scss-theme.scss*:

![src\app\shared\services\notification.scss-theme.scss](https://dev-to-uploads.s3.amazonaws.com/i/ih5e2s62lf66lsjmcz4o.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/shared/services/notification.scss-theme.scss">src/app/shared/services/notification.scss-theme.scss</a></figcaption>

Notice the use of `$notifications-theme`. That would be a map of colors needed for notifications' left borders. As you can see in the theme file, I have added relevant icon to indicate it's importance.

> *__ℹ️ Pro Tip:__ These icons are from Material Icons' [Codepoints](https://github.com/google/material-design-icons/blob/master/iconfont/codepoints), you can change them if you wish.*

Let's create that map of colors in *src/theme.scss*. Add below content:

![src/theme.scss](https://dev-to-uploads.s3.amazonaws.com/i/brrfkt8itbk63nm72weh.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/theme.scss">src/theme.scss</a></figcaption>

Of course, you can use colors of your choice. We will also need to export this theme to *styles.scss* and eventually to *custom-component-theme.scss* and *notification.scss-theme.scss*. Let’s do that.

First, let's add an argument for notifications theme in `custom-components-theme` and also import `notification-theme` from *src/app/shared/services/notification.scss-theme.scss*:

![src/custom-component-themes.scss](https://dev-to-uploads.s3.amazonaws.com/i/7790jz208lcp3sc52bp9.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/custom-component-themes.scss">src/custom-component-themes.scss</a></figcaption>

Next, in *styles.scss*, add our new theme in `custom-component-theme`:

![src/styles.scss](https://dev-to-uploads.s3.amazonaws.com/i/hisqawenyr9qw10j73dw.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/styles.scss">src/styles.scss</a></figcaption>

Let’s open a notification on a button click from our *app.component.html*:

![src/app/app.component.html](https://dev-to-uploads.s3.amazonaws.com/i/jpnj250tk0ebcjx7ogh5.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/app.component.html">/src/app/app.component.html</a></figcaption>

Modifications are required in *app.component.ts* file, too:

![src/app/app.component.ts](https://dev-to-uploads.s3.amazonaws.com/i/ihavr43sgsoj5y4pihc5.png)
<figcaption><a href="https://github.com/shhdharmen/theming-material-components-part-3/blob/master/src/app/app.component.ts">src/app/app.component.ts</a></figcaption>

If you change `this.notification.default(…)` to `info(…)`, `success(…)`, `warn(…)` or `error(…)`, you would see respective outputs:

![Notifications output](https://dev-to-uploads.s3.amazonaws.com/i/5y328vfz6me32dxs2rie.png)

Great!!! With this, we have finished the article.

![Finish](https://dev-to-uploads.s3.amazonaws.com/i/q2lp9o8ss1t6u0ffl8gr.jpg)

## Thank You,

for reading this article. This was the last part of the series. You can visit Part One and Part Two on their respective links in the series.

The final code is uploaded at Github repo. Please let me know your thoughts and feedbacks in the comments.

{% github shhdharmen/theming-material-components-part-3 %}

And yes, always believe in yourself.

![Believe mural painting photo – Free Human Image on Unsplash](https://dev-to-uploads.s3.amazonaws.com/i/62n2v7i628h42njw9xrn.jpg)

#### Credits
<small>Cover image: <a target="_blank" rel="noopener" href="https://photos.icons8.com/photos/blue-wooden-material--5b7ec7948b658800015f72ee">Photo</a> by <a target="_blank" rel="noopener" href="https://photos.icons8.com">Moose</a>
Start photo: Photo by <a href="https://unsplash.com/@jontyson?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jon Tyson</a> on <a href="/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Hooray GIF: https://tenor.com/tlFR.gif
Finish image: Photo by <a href="https://unsplash.com/@awcreative?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Aw Creative</a> on <a href="/s/photos/finish?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Believe mural painting photo – Free Human Image on Unsplash: Photo by <a href="https://unsplash.com/@berko?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ran Berkovich</a> on <a href="/s/photos/believe?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></small>