Angular theme with more than 3 colors

Question

I want to make an angular theme with more than three colors (primary, accent, warn) and apply those colors to material elements like progress bars and such.

I was reading this Material design case studies: https://material.io/design/material-studies/rally.html#color

Where they use a palette of 6 colors:

To add the extra colors I imagine that making this will be the correct way to go?

$mat-extra-color-orange: (
 50  : #fff8e5,
 100 : #ffebb0,
 200 : #ffdc78,
 ...
}

But what if I want to use that extra color in, say, mat-progress-bar that only accepts primary/accent/warn?

Thanks for your help!

Answer 1

Up to Angular Material 6.x (I don't know what 7.x etc. might change), only the three primary/accent/warn palettes are available within a theme. This is very limiting, but there is one thing you can do that might be useful sometimes - define more than one theme.

Extra themes give you extra primary, accent, and warn palettes. You can then apply different themes to different components depending on which primary, accent, and warn colors you want each component to have. (You may need to dig in to Angular Material source code to figure out how to do this, but it's not that complicated - just look at what the angular-material-theme mixin does.)

Obviously, this doesn't give you more color options per component, but it does let you use more colors in your application and use alternate colors for selected components. This is sort of against the idea of theming in Material Design, so use cautiously.

For example:

@import '~@angular/material/theming';

$main-theme: mat-light-theme($mat-purple, $mat-yellow, $mat-red);
$alternate-theme: mat-light-theme($mat-deep-purple, $mat-amber, $mat-red);

@include mat-core-theme($main-theme);
@include mat-autocomplete-theme($main-theme);
@include mat-badge-theme($alternate-theme);
...