How to use custom material color palettes in Angular?-CodePudding

I am using material buttons in my page as such:

<button mat-stroked-button color="primary">Learn</button>

This "primary" color is useful, however, I want to be able to use different color palettes with my material components. I have created another color palette in my .scss file as such:

$teal: (
  50 : #e5f4f3,
  100 : #bee4e1,
  200 : #93d3cd,
  300 : #67c1b8,
  400 : #47b3a9,
  500 : #26a69a,
  600 : #229e92,
  700 : #1c9588,
  800 : #178b7e,
  900 : #0d7b6c,
  A100 : #adfff3,
  A200 : #7affec,
  A400 : #47ffe4,
  A700 : #2dffe0,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

and I am trying to use it as such:

<button mat-stroked-button color="teal">Learn</button>

However, my IDE warns me that

teal is not a valid value for color. Expected: primary, accent, or warn

What am I supposed to do?

CodePudding user response：

Angular Material themes are based on defining your primary, warn and accent colors. The Documentation on Angular Material Theming are very helpful here

You can define these colors in your main scss file. (below is copied straight from the docs)

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 )
));

@include mat.core-theme($my-theme);

@include mat.button-theme($my-theme);

Once you define your theme, you can then use the primary|accent|warn based on your theme.

If you don't want to do this, then you need to change the button's style directly, i.e. the background-color