The complete guide to Angular Material Themes

A theme is the set of colors that will be applied to the Angular Material components. Angular material will allow us to specify primary, accent, and warning colors that will be used on Angular Material components as an attribute.

Available pre-built themes:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

1. Create an Angular Project using Angular CLI and add Angular Material

npm i -g @angular/cli
ng new theming-material-components — style=scss — skipTests — routing=false

👉 --style will set our styling partner, i.e. scss, --skipTests will skip generating 'spec.ts' files for our project and --routing=false will not generate ( and ask about) routing module.

2. Understand Custom Theme

Let’s look at 📄 the style.scss file:

There is three custom theme we used in this project 1. theme1-yellow2. theme2-indigo 3. theme3-green.

3. Create Basic UI

Let’s update the content of 📄 app.component.html, 📄 app.component.scss, & 📄 app.component.ts:-

Summary of 📄 app.component.html:

1. In this file, we create one navigation bar in navigation we create a menu to show the list of the custom theme.
2. In the matMenu click event, we call on a function called switch theme and pass theme id as a parameter.

<mat-menu #menu="matMenu">
<button value='theme1' mat-menu-item (click)="switchTheme('theme1')">Theme 1-Yellow</button>
<button value='theme2' mat-menu-item (click)="switchTheme('theme2')">Theme 2-Blue</button>
<button value='theme3' mat-menu-item (click)="switchTheme('theme3')">Theme 2 Green</button>
</mat-menu>

3. Create a MatMenu with color selection entries. This will help us change the color of mat-toolbar and mat-button

Summary of 📄 app.component.ts:

1. By default appId = theme1
2. In navigation, u click the second theme its call switchTheme function and pass ID as a parameter.

For more information,

Theming Angular Material

Click here for source code.

Conclusion

And that’s it! Did this work for you? Please leave any questions and comments below!

Thank you for reading!

If you found this article helpful, 👏👏👏.