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

Posted 2023-03-07

【中文标题】主题颜色材料设计与角度材料

【英文标题】：Theme colors Material Design vs Angular Material

【发布时间】：2019-02-28 21:48:50

【问题描述】：

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

主要 主要变体 次要 次要变体 背景 表面 错误

角度材质定义

主要 次要 警告

此外，角度中的对比色相当于 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);

【参考方案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

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

【讨论】：

这是一种改变背景颜色的有趣方式。我的主要问题更多是关于“如何使用 3 种颜色的主题？”现在我需要指定一个带有主要和重音的主题，然后是一个带有另一个主要的可选主题。然后将项目包装在一个标记我的可选主题的类中......我只是在寻找一种充分使用变体的方法......

“完全使用变体”我认为是一个奇怪的说法:)。最终，使用 1 个或 100 个变体并不重要——重要的是你的 UI 看起来不错并且是一致的（遵循 Material Design 可以帮助你实现这一点）。如果您想尝试使用 Angular Material 主题机制的限制，可以 (see this)，但您不必这样做。提供所有色调的所有调色板。您可以直接访问它们，或定义自己的主题机制，或定义自己的颜色。但这并不是真正的 Material Design。

嗯，我想这是从“我用纯 html 做任何我想做的事情”到“​​我遵循一致、更清醒的指导方针”的过程中的步骤，我明白你的意思。 Material Design 基于 2 种颜色的主色和重音......然后仍然可以通过定义多个主题来扩展

如果 Angular Material 有一种简单的方法来使用更多颜色（尤其是对于像状态图标这样的特殊事物），那就太好了——它本身并不是材料设计的“禁止”。但是他们已经实现了三色系统的一个相当基本的版本，所以我们所能做的就是破解它。