Theming in Angular Material. Create your own custom theme in Angular…
By: Abhimanyu Chauhan
Tags: Angular, Front End Development, Material Design, UI Design, UI

Theming in Angular Material

Create your own custom theme in Angular Material

Finally after a long time of working in ReactJS, I thought to overcome my bias against Angular by working on a project using Angular.

The first requirement I was given was to implement theming using Material. Having worked on Material-UI, I had an understanding on the Material Design philosophy. Being new to Angular and Angular Material, meant it was going to be a hurdle to deliver it on time.

My first step being, going through the official Material theming docs. It helps to know the basics, before you start. By default Material provides four themes deeppurple-amber, indigo-pink, pink-bluegrey and purple-green.

*Note: you can directly check them on the Material site, just click on the paint-can icon.

default themes

How to define a theme?

Its easier than you think, all you need are three colors:

primary: the main color

accent: works as the secondary color

warn: for your warnings

*Note: I will be using SCSS to implement theming

Setting up the theme involves you creating a new theme.scss file(if you want to), importing the material theming file from material and including the mat-core mixin.

@import '../node_modules/@angular/material/theming'; @include mat-core();

Now its time for the fun part, let’s choose some colors. Material theming gives you access to its own color-palette, you can access the theming file from the material folder in the node-modules.

theming.scss

Some of the colors include: $mat-red, $mat-purple, $mat-pink, etc.

Let’s create the theme now:

$custom-theme-primary: mat-palette($mat-purple)

$custom-theme-accent: mat-palette($mat-pink);

$custom-theme-warn: mat-palette($mat-red, 500, A200, A700); //creating your theme

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); //updating main theme

@include angular-material-theme($custom-theme);

You must be wondering what the 500, A200 & A700 values are, to figure that out lets check the theming file:

mat color shades

500, A200 & A700 are the different saturations of the color. The mat-palette function accepts five parameters, the first being the color palette, the other three being the main shade, the lighter shade, the darker shade(in sequence) and the last being text color (we will ignore this as it points to the main color).

*Note: in material each color being used is divided into 3 shades, one being the main, one light and the last being the darker shade.

But we defined these properties for only warn and not for primary and accent. This happens because, other parameters have a default fallback value.

mat-palette function

To apply the custom theme to a particular material components, just include the mat-module theme and pass in your theme.

@include angular-material-theme($custom-theme); @mixin angular-material-theme($theme) { @include mat-button-theme($theme); @include mat-button-toggle-theme($theme); @include mat-card-theme($theme); }

With that, the custom theme is done and can be used with the mat-components.