Angular 材质主题中的色调答案

【问题标题】：Hues in Angular Material ThemingAngular 材质主题中的色调
【发布时间】：2019-11-19 01:54:16
【问题描述】：

在定义调色板时，色调实际上会影响什么？

hpsapf-primary: mat-palette($mat-light-blue, 400, 50, 900);

第一个值 (400) 是默认色调。
第二个值 (50) 是较浅的色调。
第三个值 (900) 是较暗的色调。

在组件上设置 color="primary" 时使用默认色调

// The button gets the color #29B6F6 as can be looked up here: https://material.io/design/color/#tools-for-picking-colors
<button mat-button color="primary">Primary</button>

那么 Angular 材质如何使用较浅 (50) 和较深 (900) 的色调，或者我该如何使用它们？它们有什么用？

【问题讨论】：

欢迎来到 SO！你能澄清你的问题吗？

标签： angular-material

【解决方案1】：

如何使用它们可以通过查看 Angular Material 源代码来了解。更具体地说，查看一些组件主题的 mixin 文件。来自progress bar的例子：

@mixin mat-progress-bar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-progress-bar-background {
    fill: mat-color($primary, lighter);
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }
  ...
}

您可以通过主题化实用程序 mixins 和函数以及默认、较亮、较暗、默认对比度、较浅对比度和较暗对比度调色板映射键以相同的方式使用它们。在主题指南中有说明：https://material.angular.io/guide/theming-your-components#note-using-the-code-mat-color-code-function-to-extract-colors-from-a-palette。

【讨论】：

【解决方案2】：

更新：第一个答案有点正确，想法就在那里，我把我的答案放在下面。对于像我这样不熟悉角度材料的人来说，这有点模糊。下面的链接，或者这里的Angular 2 Material use lighter/darker colors on button 确实回答了我的需要。上一个答案可能适用于进度条，但现在我看不出它如何与按钮一起使用。如果有人知道怎么做，请帮忙。 Angular 的文档有些稀疏。但是，如果我可以这样使用它，我仍然更喜欢它

<button mat-button color="primary darker">Primary darker</button>

也许在它旁边我希望颜色是默认的，然后我可以像这样使用它

<button mat-button color="primary default">2nd default</button>
<button mat-button color="primary default">3rd default</button>

我想这就是问题的全部内容和方式。更新结束。

~~因为这里没有任何答案，但实际上都在附近。他们似乎没有抓住重点。我们中的一些人对颜色有点挑剔~~。所以让我试着重新表述一下问题是什么。

他只是想用这样的东西：

<button mat-button color="primary default">Primary default</button>
<button mat-button color="primary lighter">Primary lighter</button>
<button mat-button color="primary darker">Primary darker</button>

我希望这是他想问的，因为它看起来像。

我认为答案可能在这里Angular 2 Material use lighter/darker colors on button

如果可行，那是我认为可行的最接近的。我稍后会尝试，稍后会编辑这篇文章。

【讨论】：