Angular Material 2 matte palette () using lighter and darker option

Based on the selection guide, you can define a custom theme accent

for our example. The second parameter overrides the $mat-pink

default A200, but how does the third ( $lighter

) and 4th ( $darker

) parameter work?

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

From @angular/material/_theming.scss

@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
   .....
}