Angular Material自定义主题-垫板为什么要采用4个变量？

Question

我目前正在学习如何使用文档（https://github.com/angular/material2/blob/master/guides/theming.md）创建自己的Angular Material 2主题。

似乎主要的地方就是在这里指定颜色

// 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);

我不太了解垫子面板的功能。我了解指定颜色的第一个参数-我不明白为什么会有默认的，较浅和较深的颜色。

我认为这些颜色将在您具有这样的代码时显示

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

在这种情况下，工具栏应为原色。我看不到任何指定可以使其更暗或更亮的位置。那么，默认的，较浅和较深的颜色分别是什么呢？

Answer 1

查看_theming.scss，您将具有mat-palette定义：

// 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)

使用https://material.io/tools/color获取颜色名称和参数值。

在theme.scss文件中，您已使用定义了主题：

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

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

更改mat-light-theme为mat-dark-theme，您的主题将使用调色板的较暗的值。

Answer 2

因为这就是材料设计指南定义颜色的方式。对于角度，我没有足够的经验来正确回答，但对于Android，状态栏使用较暗的颜色。

您可以找到更多信息==> https://material.io/guidelines/style/color.html#color-color-system