主题色Material Design与Angular Material

时间:2018-09-25 09:52:53

标签: angular-material material-design

如果我参考有关Colors的材料设计指南,则它们定义了:

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

角材料定义

  1. 主要
  2. 中学
  3. 警告

此外,角度的对比色与MDC中的On *等效。

1>在Angular Material中,根据主题构建器的功能,背景和表面设置为白色或黑色。无法访问自定义。

  

[edit] (感谢@G。Tranter):   自定义背景色here

2>在Angular Material中,我可以定义3种颜色中每种颜色的较亮和较暗的变体,但是我无法控制使用这些变体的位置! (除非我手动覆盖每个mat- *类...)

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

  

[edit] (感谢@G。Tranter):   在Angular Material中,变体的使用由组件本身定义。

如果我参考材料设计示例(上面的链接在同一页面上),例如,我将无法复制具有主要,主要变体和次要主题的主题...

我错过了什么吗?还是有人可以启发我有关主题方面的这两个主要限制?

  

[edit] (感谢@G。Tranter):   在Angular Material中,我们可以定义将应用于特定CSS类的第二个主题(具有主色和强调色)

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

1 个答案:

答案 0 :(得分:0)

实际上也不是一个限制(至少是完全限制)。

在将主题应用于应用程序和Angular Material之前,可以通过修改主题来自定义前景和背景。 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

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