主题色彩材料设计与角质材料

Question

如果我提到有关颜色的材料设计准则，它们定义：

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

角材料定义

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

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

1>在角材料背景和表面被设置为白色或黑色取决于主题建设者的功能。不能自定义。

编辑(谢谢@G.Tranter)：自定义背景色这里

2>在角度材料，我可以定义更轻和更深的三种颜色的变体，但我没有控制这些变体是在哪里使用！(除非我手动覆盖每一个垫子-*类.)

我能够用两种颜色(主色调和重音)来构建我的主题。但是，如果不能将变体分配给特定的UI元素，我就没有意义定义变体。

编辑(谢谢@G.Tranter)：在角度材料中，变体的使用是由组件本身定义的。

如果我引用材料设计示例(上面链接的同一页)，我就不能用主、主变体和次要形式再现主题，例如.

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

编辑(谢谢@G.Tranter)：在角度材料中，我们可以定义第二个主题(带有主色调和重音颜色)，该主题将应用于特定的CSS类

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

Answer 1

这两者实际上都不是一种限制(至少是完全的)。

您可以通过修改主题来自定义前景和背景，然后再将其应用于应用程序和角度材料。见这篇文章。然而，从材料设计的角度来看，使用不符合指南的背景和前景调色板可能不是一个好主意，因此通常没有理由不使用角材料中的默认调色板。

你不能控制角材料组件如何使用变体--这是部件本身设计的一部分。但是，当您创建调色板时，您可以控制这些变体是什么。例如：

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

或

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

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