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

Question

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

我尝试过的一种方法是在 theme.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 是一个指令，唯一支持的值是主要、重音和警告。见https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts。使用类覆盖是解决这个问题的唯一方法。但是，如果您创建自己的自定义按钮组件，则可以通过自定义组件的主题应用不同的主题并实现三种以上的颜色。

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

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