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