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

Question

我需要在 Angular Material 中将自定义颜色设置为主要颜色。阅读一些主题指南和 SO 答案（例如在 Angular Material 2中更改原色）表明我需要从预定义的一组颜色中选择颜色。我可以使用自定义值吗？

Answer 1

您可以使用任何您想要的颜色，但必须在您自己的自定义“调色板”中定义它才能在主题中使用。查看Angular Material 调色板的示例。然后，您可以使用调色板代替材料调色板，就像$mat-blue创建主题时一样：

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

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