Angular theme with more than 3 colors

user_1683904 0
Viewed 6502

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:

Rally color palette

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!

angular-material angular themes
3 Answers

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);
...
user_92262130
user_91154190
user_133304100
Related