超过 3 种颜色的 Angular 主题

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 源代码才能弄清楚如何执行此操作，但它并不那么复杂 - 只需看看 mixin 的作用即可angular-material-theme。）

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

例如：

@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);
...