Angular Material Custom Theme

In Angular Material Version 21.1.2, there is no option available to select custom themes.

So, we need to select any one default theme in the prompt.

To customize the default theme configuration generated in styles.scss, we need to follow the guideline https://material.angular.dev/guide/theming#defining-a-theme

To customize the color, we need to follow the guideline https://material.angular.dev/guide/theming#custom-color-palettes which helps to generate the color palette.

ng generate @angular/material:theme-color

Once the above command was executed, it will prompt for different color code such as primary, secondary, tertiary, neutral…

Based on the given colors it will generate color palette in the _theme-colors.scss file.

Then import the file and replace the mat.$primary-palette and mat.$tertiary-palette in the styles.scss file

@use '@angular/material' as mat;
@use './../../../theme-colors' as custom; // @import was deprecated

html {
  height: 100%;
  @include mat.theme((
    color: (
      primary: custom.$primary-palette,
      tertiary: custom.$tertiary-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

Note:

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import or https://sass-lang.com/documentation/breaking-changes/import/