Angular Material 自定义主题 - 为什么 mat-palette 需要 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);

我不太明白 mat-palette 的作用。我理解指定颜色的第一个参数——我不明白为什么会有默认的、更浅和更深的颜色。

我认为当你有这样的代码时这些颜色会被显示

<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，您的主题将使用调色板中较暗的值。