material theme 自定义_Angular Material自定义主题 – 为什么mat-palette需要4个变量？

似乎主要是在这里指定颜色

// 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的作用.我理解第一个指定颜色的参数 – 我不明白为什么有一个默认的,更浅和更暗的颜色.

当你有这样的代码时,我想这些颜色会被显示出来

text

在这种情况下,工具栏应为原色.我看不到任何指示我可以使它变暗或变亮的地方.那么用于什么的默认,更亮和更暗的颜色？

最佳答案 看看_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)

在你的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,您的主题将使用调色板中较暗的值.