如何将Angular Material主色设置为自定义值？

Question

我需要在Angular Material中将自定义颜色设置为主要颜色。阅读一些游戏指南和SO {1}}等答案表明我需要从预定义的颜色集中选择颜色。我可以使用自定义值吗？

Answer 1

您可以使用您想要的任何颜色，但必须在您自己的自定义调色板中定义。为了用于主题。有关示例，请查看Angular Material palettes。然后，在创建主题时，您将使用调色板代替$mat-blue之类的材质调色板：

$my-blue: (
  50: #e3f2fd,
  ...
)
...
$primary: mat-palette($my-blue);
...
$theme: mat-light-theme($primary, $accent);

在网上搜索angular material palette tool或类似内容。有许多免费的在线工具可以从基色创建调色板。