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.

Checkout documentation of theming: https://material.angular.io/guide/theming — joka00, Mar 16 '19 at 13:45
I couldn't find anything related method/way to use colors other then pallets — Ankur Akvaliya, Mar 16 '19 at 14:04
you can use ngStyle to change the background color as wanted : — Amit Baranes, Mar 16 '19 at 15:34

score 1 · Answer 1 · answered Mar 16 '19 at 20:04

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);
}

Angular material : How to use all colors of theme

1 Answers1