角度主题超过3种颜色

Question

我想制作一个有三种以上颜色（主要，重音，警告）的角度主题，并将这些颜色应用于进度条等材质元素。

我正在阅读这个材料设计案例研究：https://material.io/design/material-studies/rally.html#color

他们使用6种颜色的调色板：

为了增加额外的颜色，我想这会是正确的方法吗？

$mat-extra-color-orange: (
 50  : #fff8e5,
 100 : #ffebb0,
 200 : #ffdc78,
 ...
}

但是，如果我想在mat-progress-bar中使用那种额外的颜色，只接受primary/accent/warn呢？

谢谢你的帮助！

Answer 1

直到Angular Material 6.x（我不知道7.x等可能会改变什么），主题中只有三个主要/重音/警告调色板可用。这是非常有限的，但有一件事你可以做，有时可能有用 - 定义多个主题。

额外的主题为您提供额外的主要，重音和警告调色板。然后，您可以将不同的主题应用于不同的组件，具体取决于您希望每个组件具有的主要颜色，重音和警告颜色。 （您可能需要深入了解Angular Material源代码以了解如何执行此操作，但它并不复杂 - 只需看看angular-material-theme mixin的功能。）

显然，这不会为每个组件提供更多颜色选项，但它确实允许您在应用程序中使用更多颜色，并为选定组件使用替代颜色。这有点违背材料设计中主题的想法，因此请谨慎使用。

例如：

@import '~@angular/material/theming';

$main-theme: mat-light-theme($mat-purple, $mat-yellow, $mat-red);
$alternate-theme: mat-light-theme($mat-deep-purple, $mat-amber, $mat-red);

@include mat-core-theme($main-theme);
@include mat-autocomplete-theme($main-theme);
@include mat-badge-theme($alternate-theme);
...