Angular Material custom theming - why does mat-palette take 4 variables?

Question

I'm currently learning how to create my own Angular Material 2 theme using the documentation (https://github.com/angular/material2/blob/master/guides/theming.md)

It seems the main bit is to just specify the colors here

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

I do not quite understand what the mat-palette does. I understand the first parameter which specifies the color - I do not understand why there is a default, lighter and darker color.

I thought these colors are to be displayed when you've got code like this

<md-toolbar color="primary">
text
</md-toolbar>

In that case, the toolbar should be in the primary color. I can't see anywhere that specifies I can make it darker or lighter too. So what are the default, lighter and darker colors that are used for?

Answer 1

Looking at _theming.scss you have the mat-palette definition :

// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
// of the Material Design hues.
// @param $color-map
// @param $primary
// @param $lighter
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)

Use https://material.io/tools/color to get the color names and the paramter values.

In your theme.scss file you have defined your theme with :

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

Change mat-light-theme into mat-dark-theme and your theme will use the darker values of your palette.

Answer 2

A material palette consist of a range of colors with different contrast. They use a number system as a key for which color to use. The 500 is the default color.

There are material components that use the default as their color.

background-color: mat-color($palette); color: mat-color($palette, default-contrast);

This would assign the 500 color and the contrast text to go with it.

When you're creating the palette you can change the default from 500 to A200 by changing the second value.

$candy-app-accent: mat-palette($mat-pink, A200);

You can check out one of my demo's to see a custom component and custom palette in action https://angular-material-waterlooblue.stackblitz.io

Answer 3

Because this is how material design guide defines colors. For angular, I have not enough experience to correctly answer but for android, darker color is used for status bar.

You can find more information ==> https://material.io/guidelines/style/color.html#color-color-system

Answer 4

I was looking for the same info and found that, in supplement to mrroboaat:

This post answers our question.

in some places (possibly just progress bars - see #4088), they are used as the lighter and darker hues for components. Otherwise, you can consume those colors while theming your own components:

So does this post

mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value.