角材料-如何在活动主题的HTML中使用所有颜色？

Question

If I import the SCSS theming functions to my component's stylesheet:

@import '~@angular/material/theming';
@import 'src/my-mat-color-palette';

I can access all theme colors / hues like this:

background: mat-color($my-pallete, 700);
color: mat-contrast($my-pallete, 700);

In template file I am also able to set primary , accent and warn theme color for components that have the @Input() color property:

<button mat-button color="accent">Click me!</button>

But how can I set all the other colors / hues in template file? Are they already provided as classes (something like mat-primary-300 ) or do I have to declare them myself?

Answer 1

As of now, there isn't any direct way in material 2 (like md-color in angular material) to use hues, however you can use following work around: Create style classes as follows:

.primary-light-bg {
  background-color: mat-color($primary, lighter);
}

.primary-dark-bg {
  background-color: mat-color($primary, darker);
}

.primary-bg-A200 {
  background-color: mat-color($primary, A200);
}

.primary-bg-A300 {
  background-color: mat-color($primary, A400);
}

You can also use other color swatches. For eg:

.purple-bg-600 {
  background: mat-color($mat-purple, 600);
}

.green-bg-600 {
  background: mat-color($mat-green, 600);
}

Hope this helps!