Angular custom theme stuff - why does matte palette accept 4 variables?
I am currently researching how to create my own Angular Material 2 theme using the documentation ( https://github.com/angular/material2/blob/master/guides/theming.md )
The main bit seems to be 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 don't quite understand what the matte palette does. I understand the first parameter that specifies the color - I don't understand why there is a standard, lighter and darker color.
I thought these colors should be displayed when you have code like this
<md-toolbar color="primary">
text
</md-toolbar>
In this case, the toolbar should be in the primary color. I don't see anywhere that indicates that I can make it darker or lighter. So what are the defaults, lighter and darker colors that are used for?
source to share
Since material design guidelines define colors. For angular I don't have enough experience to answer correctly, but for android, a darker color is used for the status bar.
You can find more information ==> https://material.io/guidelines/style/color.html#color-color-system
source to share
I searched for the same information and found that in addition to mrroboaat :
This post answers our question.
in some places (maybe only progress bars - see # 4088), they are used as lighter and darker shades for components. Otherwise, you can use these colors while using your own components:
So does this post
mat-palette takes the name of a color as its first argument, and the other optional parameters of the second, third, and fourth define the default, lighter value, and darker value.
source to share