How to customize Angular/material theme color in angular application

Some times in our applications we want to have a different color than that provided by angular/material . and we can do that manually by updating angular/material theming.scss file. follow the steps..

1. Create an angular application: “ ng new <project-name>”
2. Add angular/material to the application: “ng add @angular/material”

This will ask you to select any particular theme that you want, select one and it will add related files and update the following files

Angular.json: adds selected theme css to styles list.

If you “Set up global Angular Material typography styles” to “yes” it will add the css link to styles under test section too.

Package.json: installs @angular/cdk along with @angular/material.

index.html: adds font family and icons links

style.css:

app.module.ts

If you Set up browser animations for Angular Material? to yes

If you Set up browser animations for Angular Material? to no

The above files gets updated on adding @angular/material. and if we want to update default theme colors add a theme.scss file in the project src folder and add the following code

@import ‘~@angular/material/theming’;

@include mat-core();

$my-app-primary:mat-palette($mat-amber, 400);

$my-app-accent: mat-palette($mat-light-blue, A900, A100, A600);

$my-app-warn: mat-palette($mat-red);

$my-app-theme: mat-light-theme($adrenaline-app-primary, $adrenaline-app-accent, $adrenaline-app-warn);

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

$primary-color :rgba(255, 202, 40, 1);

$secondary-color:rgba(3, 155, 229, 1);

$primary-color-report: rgba(255, 202, 40, 1);

.primary-color {

color: $primary-color;

}

.primary-background {

background: $primary-color;

}

.secondary-color {

color: $secondary-color;

}

And then remove material css from styles array in angular.json(if you do not remove it then it will override the theme customization and our customization will not work.)

Good Luck.