Question

我正在创建有角度的材质主题。我正在关注this文章，以生成3种颜色主题，其中包含原色，强调色和警告颜色，但是我的业务场景预计总共5种颜色。

我尝试过的一种方法是在themes.scss中添加调色板并将这些颜色应用于各个组件，但是有没有更好的方法或提供有角度的材料来配置这样的调色板？

下面是我的实现示例。

@import 'src/theme.scss';
$color1: map-get($my-theme, color1);
button.level1 {
  background-color: mat-color($color1);
}
$color2: map-get($my-theme, color2);
button.level2 {
  background-color: mat-color($color2);
}

但是使用这种方法，我需要创建一个<button mat-button class="level1"></button>之类的按钮我想要的是<button mat-button color="level4"></button> 有人可以帮忙吗？

Answer 1

在MatButton和其他“ CanColor”组件上，color是一条指令，唯一支持的值是primary，accent和warn。参见https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts。使用类重写是解决此问题的唯一方法。但是，如果创建自己的自定义按钮组件，则可以应用不同的主题，并通过自定义组件的主题获得三种以上的颜色。

下面是一个如何使用多个主题的示例：Angular theme with more than 3 colors。在您的情况下，您可以使用my-primary-button包装mat-button，再加上my-alternate-button，my-special-button，依此类推。为每个按钮设置主题时，将使用不同的自定义主题，以便每个按钮的原色和强调色不同。甚至可能只有一个调色板可以使用不同的索引（50、100、200，...）定义颜色，因为创建主题时只需要三个即可。

进一步考虑，您可以通过使用由属性（例如）修改的通用基本标签选择器创建自定义按钮来简化界面。 my-custom-button[main]，my-custom-button[alternate]，my-custom-button[special]等

如何创建具有多种颜色的棱角材质主题

1 个答案: