Angular material 主题颜色材质设计与角度材质

如果我参考有关的材料设计指南，它们定义：

初级的

主要变异体

次要的

次级变异体

背景

表面

错误

角材质定义

初级的

次要的

警告

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

1> 在“角度材质”中，背景和曲面根据主题生成器功能设置为白色或黑色。没有自定义的访问权限

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

2> 在“角度材质”中，我可以定义3种颜色中每种颜色的浅色和深色变体，但我无法控制这些变体的使用位置！ （除非我手动覆盖每个mat-*类…）

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

[编辑]（谢谢@G.Tranter）： 在角材质中，变体的使用由组件本身定义

如果我参考材料设计示例（与上面链接的页面相同），我无法复制主、主变型和次变型的主题，例如

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

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

---

两者实际上都不是限制（至少是完全限制）

在将主题应用于应用程序和角度材质之前，可以通过修改主题自定义前景和背景。但是，从材质设计的角度来看，使用不遵循指导原则的背景和前景选项板可能不是一个好主意，因此通常没有理由不在角度材质中使用默认选项板

您无法控制角材质组件如何使用变体-这是组件本身设计的一部分。但是，您可以在创建选项板时控制这些变体是什么。例如：

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

或

---

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

这是一种改变背景颜色的有趣方式。我的主要问题是关于“如何使用3种颜色的主题？”现在我需要指定一个带有主色调和重音的主题，然后是一个带有另一个主色调的可选主题。然后将项目包装在一个类中，标记我的可选主题。。。我只是在寻找一种完全使用变体的方法…“完全使用变体”是一个奇怪的说法，我认为：）。归根结底，使用1个或100个变体并不重要，重要的是您的UI外观良好且一致（以下材料设计可帮助您实现这一点）。如果您想尝试使用Angle Material的主题化机制的限制，可以（），但不必这样做。所有色调的调色板都可用。您可以直接访问它们，或定义自己的主题机制，或定义自己的颜色。但这并不是真正的材料设计。好吧，我想这是从“我用纯HTML做我想做的任何事情”到“我遵循一个一致的、更清醒的指导原则”的一系列步骤，我明白你的意思。材料设计基于两种颜色：原色和强调色。。。然后仍然可以通过定义多个主题来扩展。如果角材质有一种简单的方法来使用更多的颜色（特别是对于状态图标这样的特殊事物），那就太好了。它本身并不是材质设计所禁止的。但他们已经实现了一个相当基本的三色系统版本，所以要克服这个问题，我们所能做的就是破解它。

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

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