What do the third and fourth arguments of the mat-palette function do (not the first/second) and how do I use those for my own components

I know what this does:

$my-accent: mat.define-palette(mat.$pink-palette, A200);

Now the primary color will be A200.

However, what happens if there is more than two arguments?
Like such:


$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

Example taken from here:

What do A100 & A400 do in this case?

It would really nice to get a link to the corresponding documentation about those parameters where you drew your knowledge from.

I tried searching for docs, found nothing.

I tried playing around with it in my app, nothing changed.

If those are special color variations, then how do I use those in my own elements manually, e.g. color=„primary-1“, primary-2.

I want to apply those colors if my element is in a special state, such that it stands out from other elements which have the color primary.

>Solution :

You already have that documentation

These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue

Leave a Reply