Angular Material custom colors

Question

I would like to have access to more than 3 colors for my material theme. For example, I would like to add in $theme-success: mat-pallete($mat-green) to have a green success color in my Material components like md-checkbox color="success".

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

$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-yellow, A400, A200, A600);
$theme-warn: mat-palette($mat-red);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

.body-light {
  @include angular-material-theme($theme);
}

Is this possible?

Answer 1

The color bindings only support primary, accent, and warn.

If the coloring is simple (for checkbox, it's just .mat-checkbox-background and .mat-ripple-element), you can use the palette yourself:

$theme-success: mat-palette($mat-green);

.mat-checkbox-ripple .mat-ripple-element {
  background-color: mat-color($theme-success, 0.26);
}

You could probably also get away with making 2 themes, where the second one uses your success color for primary

$theme-primary: mat-palette($mat-blue);
$theme-accent: mat-palette($mat-yellow, A400, A200, A600);
$theme-warn: mat-palette($mat-red);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

$theme-success: mat-palette($mat-green);
$theme2: mat-light-theme($theme-success, $theme-accent, $theme-warn);

.body-light {
  @include angular-material-theme($theme);
}

.component-success {
  @include angular-material-theme($theme2);
}

Answer 2

Also, if you really need an extra color you can create class in styles.scss (or.css) or anywhere in your style sheets.

.mat-buttonSuccess{
    background-color: #ffff00;
    color: #000;
}

and then call it as color same way as primary, accent and warn.

<button mat-raised-button color="buttonSuccess">Success</button>