使用更亮和更暗的选项的角度材质2垫调色板（）

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

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