Material Theme with Angular 7 – Change primary and accent color

One of the strongest feature of Angular Framework lies in the structured approach for application development. Directives, components, modules, services, styles etc promote reusable component development. On top of that, with the Theme driven development, it is possible to customize the application appearance – Material Design. This indicates a strong architecture concept of segregating application behavior from the appearance.

Most of you must have already heard about Material Design concept introduced by Google. It provides an elegant way to style the components and design is actually based on the rich theory of how user interacts with application.

Changing primary colors

With material design, it is quite easy to switch between different colors or more commonly known as color pallets. The material design does come with a host of different options that one can choose from. But in my case, I was in the need of applying custom colors instead of using the one which comes pre-built with Material Design.

In the initial phase, I felt it is going to be a daunting task. But after understanding how Material Design works behind the scene, the situation was different. In this article, I will walk you through the steps for changing the primary and accent color of default Angular theme.

Configure Pre-requisites

Create a brand new application using @angular/cli. This is by far the best and developer friendly tool I have seen. Google has done an excellent job while defining the Angular framework. They ensured all the environmental aspects for developing an application are well taken care of. Here is the command for creating a new application.

ng new my-app

The CLI will prompt you few questions like, whether you wish to use routing, which CSS framework you would like to enable etc. Make sure you have selected SCSS as an option for CSS framework. The CLI will also download all the required dependencies for the application.

Install Material Design

Since Angular gives you a choice to apply styles of your own choice, the material design needs to be explicitly added to the project. But don’t worry, the task is pretty simple. Go to the root directory of your project and execute following command

npm insall --save @angular/material @angular/cdk @angular/animations

Once the installation is complete, make sure that you import BrowserAnimationsModule in main module.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
@NgModule({ imports: BrowserAnimationsModule });

The next step requires importing the default theme in styles.scss. Copy following lines in styles.sccs

@import '~@angular/material/theming';
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Next make sure that you have imported all the required Component Modules in the main module (e.g. MatButtonModule). Once you are done with all of the above steps make sure that your application is working by executing following command at the root of the project.

ng serve

If there are no compilation errors, open your favorite browser and visit http://localhost:4200

Create color palette

Material theme heavily depends on color palette. A palette defines the lighter and darker version of a given color. If you are not sure about how to generate a palette, I will request you to visit the following website.

http://mcg.mbitson.com

Choose the color of your choice and then click view code button. This will bring up a popup with a bunch of options. Make sure that you have selected “Angular JS2 (Material 2)” option. This will bring up color palette definition for Material Theme. Copy the definition and paste it in styles.scss file. Make sure that you repeat the same step for both primary and accent color.

Configure Theme

We are almost done with the code, the only thing remaining is to use a default material theme and pass the color palettes we have created. Open styles.scss file and make sure you have following code.

$mat-myapp-primary: (
    50 : #fbeded,
    100 : #f6d1d1,
    200 : #f0b3b3,
    300 : #e99494,
    400 : #e57d7d,
    500 : #e06666,
    600 : #dc5e5e,
    700 : #d85353,
    800 : #d34949,
    900 : #cb3838,
    A100 : #ffffff,
    A200 : #ffe2e2,
    A400 : #ffafaf,
    A700 : #ff9696,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-myapp-accent: (
    50 : #fffaed,
    100 : #fff4d1,
    200 : #ffecb3,
    300 : #ffe494,
    400 : #ffdf7d,
    500 : #ffd966,
    600 : #ffd55e,
    700 : #ffcf53,
    800 : #ffca49,
    900 : #ffc038,
    A100 : #ffffff,
    A200 : #ffffff,
    A400 : #fff5e1,
    A700 : #ffedc8,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$primary: mat-palette($mat-myapp-primary);
$accent: mat-palette($mat-myapp-accent);

$theme: mat-light-theme($primary, $accent);

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

The mat-palette function creates a color palette using the light and dark variants of the color we have defined above. Later this information is passed to mat-light-theme to override the primary and accent color definitions. mat-light-theme acts as a base theme for our application, you can also try mat-dark-theme and check the results. Finally, we pass these customized theme to angular-material-theme function which does rest of the job.

That’s all, if you quickly want to check the result, here is the stackblitz demo.