How to use custom theme palettes in Angular?

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://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:



filter_none

edit
close

play_arrow

link
brightness_4
code

@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);

chevron_right


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”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Reference: https://material.angular.io/guide/theming




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.