Angular Material 2 mat-palette() 使用更亮和更暗选项

Question

基于theming guide，您可以为我们的示例定义自定义主题accent。第二个参数会覆盖$mat-pink 默认为A200，但是第三个（$lighter）和第四个（$darker）参数是如何工作的呢？

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

来自@angular/material/_theming.scss

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

Answer 1

这些不同的色调由一些组件使用，例如进度条。但是，如果您将它们用作您自己的样式的 mixin，它会更有用。 This answer on a GH issue gives a good explanation.