Hues in Angular Material Theming

Question

When defining a palette, what is actually affected by the hues?

hpsapf-primary: mat-palette($mat-light-blue, 400, 50, 900);

• The first value (400) is the default hue.
• The second value (50) is the lighter hue.
• The third value (900) is the darker hue.

The default hue is used when setting color="primary" on a component

// The button gets the color #29B6F6 as can be looked up here: https://material.io/design/color/#tools-for-picking-colors
<button mat-button color="primary">Primary</button>

So how are the lighter (50) and darker (900) hues used by Angular Material or how can I use them? What are they good for?

Answer 1

How they are used can be seen by looking at Angular Material source code. More specifically, look at some of the component theming mixin files. An example from progress bar:

@mixin mat-progress-bar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-progress-bar-background {
    fill: mat-color($primary, lighter);
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }
  ...
}

You can use them in the same manner through the theming utility mixins and functions and the default, lighter, darker, default-contrast, lighter-contrast, and darker-contrast palette map keys. It is explained in the theming guide: https://material.angular.io/guide/theming-your-components#note-using-the-code-mat-color-code-function-to-extract-colors-from-a-palette.

Answer 2

UPDATE: The first answer was somewhat right, the idea was there, I take my answers below back. It is a little vague, for someone new to angular-material, like me. The link below, or here Angular 2 Material use lighter/darker colors on button does answer what I need. The previous answer might work for a progress bar, but right now I do not see how it will work with buttons. If someone do know how, please do help out. Angular's docs are somewhat sparse. However I still prefer if I could use it like this

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

And maybe beside it I want the color to be default then I could use it like this

<button mat-button color="primary default">2nd default</button>
<button mat-button color="primary default">3rd default</button>

I guess that is how and what the question was all about. UPDATE ENDS.

Since none of the answers here are anywhere but actually near. They seem to have missed the point. Some of us are a little picky with colors. So let me try to rephrase what the question is.

He simply wants to use something like this:

<button mat-button color="primary default">Primary default</button>
<button mat-button color="primary lighter">Primary lighter</button>
<button mat-button color="primary darker">Primary darker</button>

I hope that is what he wants to ask because it seems like it.

I think that answer might be found here Angular 2 Material use lighter/darker colors on button

IF that works that is the closest that I can think that might work. I will try it later and will edit this post in a bit.