主题颜色材料设计与角度材料

Question

如果我参考有关 Colors 的 Material Design 指南，它们会定义：

1. 主要
2. 主要变体
3. 次要
4. 次要变体
5. 背景
6. 表面
7. 错误

角度材质定义

1. 主要
2. 次要
3. 警告

此外，角度中的对比色相当于 MDC 中的 On*。

1> 在 Angular Material 中，背景和表面设置为白色或黑色，具体取决于主题构建器功能。无法访问自定义。

[编辑]（感谢@G. Tranter）： 自定义背景色here

2> 在 Angular Material 中，我可以为 3 种颜色中的每一种定义更亮和更暗的变体，但我无法控制这些变体的使用位置！ （除非我手动覆盖每个 mat-* 类...）

我可以用两种颜色（主要和重音）构建我的主题。但是，如果我不能将变体分配给特定的 UI 元素，我就没有定义变体的意义。

[编辑]（感谢@G. Tranter）： 在 Angular Material 中，变体的使用由组件本身定义。

如果我参考材料设计示例（上面链接的同一页面），我无法使用主要、主要变体和次要复制主题...

我错过了什么吗？或者有人可以告诉我主题中的这两个主要限制吗？

[编辑]（感谢@G. Tranter）： 在 Angular Material 中，我们可以定义第二个主题（主色和强调色），该主题将应用于特定的 CSS 类

.item-second-theme {
  @include angular-material-theme($second-theme);
}

Answer 1

实际上都不是限制（至少完全如此）。

在将主题应用到应用程序和 Angular 材质之前，您可以通过修改主题来自定义前景和背景。 See this post。但是，从 Material Design 的角度来看，使用不遵循指南的背景和前景调色板可能不是一个好主意，因此通常没有理由不使用 Angular Material 中的默认调色板。

您无法控制 Angular Material 组件如何使用变体 - 这是组件本身设计的一部分。但是您可以在创建调色板时控制这些变体是什么。例如：

$primary-palette: mat-palette($mat-blue, 500, 100, 700); // default

或

$primary-palette: mat-palette($mat-blue, 700, 300, 900); // darker

当然，您可以在自己的组件中完全控制如何使用阴影。