我真的只有三种颜色吗？

问题描述

我有一个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>？

解决方法

我认为更改按钮颜色最简单的方法是进行如下操作：

在HTML内：

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

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

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