How to use custom theme palettes in Angular?

Last Updated : 15 Jul, 2025

We can use custom theme palettes in angular to define our own color palette. And that theme file can be used throughout all components.

Approach:

Firstly, we have to create our own theme file and in that, we have to include mat-core() Sass mixin and import theming file from angular material. After that, we have to start building our color palette and at last, we have to include our created theme file in "angular-material-theme". After this, we can use our custom color palette by import it into "styles.Scss" file or directly we can import in any component.

Syntax:

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

//Available color palettes: https://m2.material.io/design/color/

$[variable_name]-app-primary: mat-palette([defining color]);
$[variable_name]-app-accent:  mat-palette([defining colors]);
$[variable_name]-app-warn:  mat-palette([defining colors]);

$[variable_name]-app-theme: mat-light-theme([primary color], [accent color], [warn color]);
(or)
$[variable_name]-app-theme: mat-dark-theme([primary color], [accent color], [warn color]);

@include angular-material-theme($[variable_name]-app-theme);

Example:

javascript

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

/* ======== Angular material custom themes ======== */ 

$my-custom-primary: mat-palette($mat-deep-purple);
$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
$my-custom-warn: mat-palette($mat-lime); //Optional

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

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

Inside mat-palette, we have to define values related to brightness. The default is 500 (which is the true shade of my brand color/accent color). The rest are other shades of that color (where lower numbers mean brighter shades and higher numbers mean darker shades). Again, a lower number means brighter and higher numbers mean darker. Now we can create a palette by 2 ways:

light
dark

In the above example, we used a light theme, and then we are including particular theme in "angular-material-theme".

html

<html>
<mat-card class="my-alternate-theme">
   My Themes:
   <button mat-raised-button color="primary">Primary</button>
   <button mat-raised-button color="accent">Accent</button>
   <button mat-raised-button color="warn">Warning</button>
</mat-card>
</html>