超过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的{​​{1}}中使用这种额外的颜色怎么办？

感谢您的帮助！

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

Answer 2

从Angular Material 9开始，您仍然只能使用3种颜色。通过使用多个主题，您可以实现超过3种颜色。

您可以使用以下生成器生成调色板：

http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

您要为每种颜色添加一个调色板。

然后，您可以按照其有关添加多个主题的文档来创建多个主题，以供同时使用：

https://material.angular.io/guide/theming#multiple-themes

Answer 3

您可以通过此链接定义备用主题：

https://alligator.io/angular/angular-material-custom-theme/

然后您可以使用三个以上的主题;）