Understanding Dynamic Theming in Angular Material

Introduction

In the last blog, we integrated Angular Material with our Angular Project. In this blog, we will be understanding the importance of dynamic theming and how we can apply that with help of Angular Material.

Dynamic Theming

Dynamic Theming has become one of the most important parts of websites nowadays. It always attracts the user and provides a great user experience. The dark theme is believed to be known for less eye strain and better readability. For example, in Google Playbooks we have the feature of ‘Night Light’ for a better reading experience. Similarly, we get the dark theme option in our mobile devices as well.

Angular Material Theme

In Angular Material, a theme is a collection of colors and typography styles.

In Angular Material, we get four predefined themes. Out of which two are light themes and two are dark themes. Here is the list of those four themes.

• Deeppurple-amber.css -Light theme
• indigo-pink.css – Light theme
• pink-bluegrey.css – Dark theme
• purple-green.css – Dark theme

Now let’s see how we can create our own theme.

Defining a Theme

In Angular Material, your theme is defined as a SASS map containing the colors and typography styles.   

Each theme includes three palettes – PRIMARY, ACCENT, and WARN.

The primary palette is the one that is used most frequently in your application. The accent palette is the one which is used to highlight specific elements of your application and warn is used for the errors or warnings in the application. Out of these three, Warn palette is the optional palette and the other two are mandatory palettes while defining the theme.

For defining these palettes we use the define-palette SASS map. The define-palette takes a color palette and four optional hue numbers. The first one is the default, the second is the lighter hue, the third is the darker hue and the fourth one is the text hue.

Let us now see how we define the theme. Move to your styles.scss file and add the following code:

First of all, we include the core mixin. This core mixin includes some prerequisite styles which are used by multiple components in the application. This must be included in the application once. 

Next we define variables($my-app-primary, $my-app-accent, $my-app-warn) for defining primary , accent and warn palettes. For that, we used the define-palette and passed the palettes.

To build a theme we can call either define-light-theme or define-dark-theme. This is our light theme so we will call define-light-theme now and pass all these variables to it.

Now, we are ready with our light theme.

Similarly defining the dark theme.

Now, to apply these themes we will define a class so that we can add those classes to our HTML code.

We have used the mat.all-component-themes so that that particular theme is applied to all components in your application. 

Defining Components

Let us now apply these themes. We will create two components.

ng g c header
ng g c card

Using Angular Material Toolbar for the header. Here is the HTML code for the header:

In this, we are applying the primary color of the theme.

Now for the card, we are using the mat-card.

Both are components are ready now. Now in the app.component.html we can simply call these components and then we will toggle the themes with the help of local storage.

Toggle themes

We will be using local storage to change the themes.

We can define a variable for it.

theme: string = "light-theme";

I have defined two functions, one to set the default theme and the second to toggle themes. Here are the functions:

You can then just call setDefaultTheme() in ngOnInit.

Now we are ready with all the functionality. You can now serve the application and try toggling themes. Here is the result:

Conclusion

So now we know what all things are required to construct a theme, and how we can use these themes to have dynamic theming in our application. So, go ahead and try it. To know more about these concepts, please refer here.

Also, Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Also, you can comment and tell me how I can improve my content. Feel free to share your thoughts about this blog in the comments.