Angular material : How to use all colors of theme

Question

I am using angular material in angular 7.

I had used angular-material in angular-1 before & it provided a way (md-colors) to user all colors.

But in for angular-material-7 i am unable to find these kind of property.

When we use color in component like button

<button mat-raised-button color="primary">Primary</button>

In color we can use only primary, accent & warn pallets. But i want to use more then these 3 colors. I want a way to use all material-theme colors like we used in angular-material-1

Can anyone tell me what am i missing here. All color variables exist in @angular/material/theming.scss. but i am not sure how to use these colors.

Answer 1

Had this same issue and so far it is not possible to use values different than primary, accent and warn for the color attribute. Nevertheless, There is a feature request on github related to that: Support additional colors outside primary, accent, warn

Still, you may use multiple themes and apply each one based on parent class, as describe here.

Or you may apply each theme to only specific components as described here.

In both cases, you may choose which palletes you want to use for each theme, and also create your own custom palletes.

Another option is to use CSS variables. You may define your colours on styles.css and use then on your css files:

/* styles.css */
:root {
  --color-1: #003422;
}

/* component.css */
button {
  background-color: var(--color-1);
}