我真的只有三种颜色吗？

Question

我有一个 Angular Material 应用程序。

应用程序有一个可供单击的按钮。我想让它看起来不错，所以我把它设为<button mat-button>Hello Button</button>。

现在我想让按钮以主题的“重音”颜色显示，因此我将其更改为 <button mat-button color="accent">Button</button>。效果很好。

现在我想让按钮显示为“重音”颜色的稍暗版本，因此我将其更改为 <button color="accent A600">Slightly Darker Button</button>。不，绝对不是。

我阅读了一些 Stack Overflow 并尝试了一些东西，发现我可以创建一个 CSS 类并将该类应用到我的按钮，但实际上并没有办法说“让这个成为我的主题的强调色，但有点暗。”它只是直接硬编码一个颜色值。

据我所知，Angular Material 有我无法以任何有意义的方式访问的“调色板”。

我的问题：Angular Material 中的按钮颜色真的只能是“主要”或“重音”或“警告”或完全绕过调色板系统吗？我必须做什么才能访问调色板上的各种较浅和较深的色调？

或者更直接地说，[color] 属性中有什么？ <button mat-button [color]="what-goes-here?">Slightly Darker Button</button>?

Answer 1

我认为更改按钮颜色最简单的方法是制作如下内容：

在您的 HTML 中：

<button mat-raised-button color="something">Click on me</button>

color="something" 将生成一个类，然后您就可以在 CSS 中创建它：

.mat-success{
  color: yellow;
  background: purple;
}