CODEWITHSUNDEEP
angularangular-material
Martin Schneider
Martin Schneider

Reputation: 15398

Angular Material - How to use all colors in HTML of active theme?

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?

Upvotes: 3

Views: 5484

Answers (1)

SatAj
SatAj

Reputation: 1979

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 e.g.:

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

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

Hope this helps!

Upvotes: 6

Related Questions