Angular Material 2 自定义主题按钮对比度

Question

我刚开始使用 Angular 和 Angular Material Theming，创建了带有自定义调色板的新主题。

为了生成自定义调色板，我使用了这个工具 http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

它很好用 https://stackblitz.com/edit/angular-material-custom-theme-button-contrast?file=styles.scss，但唯一的问题是如何使绿色背景上的按钮文字颜色为白色？我尝试了不同的数字，但没有效果。

$my-primary: mat-palette($mat-my-green, 500, 50, 50);
$my-accent: mat-palette($mat-my-black, 500, 900, 400);

使用

.mat-raised-button{
    line-height: 29px;
    margin-right: 8px;
    &.mat-primary{
      color: mat-contrast($mat-keldano-green,900); // get the contrast color
    }}

这个可以实现，但我认为这不是很好的解决方案。另一个问题是步进器组件的步数也存在对比度问题。

- Yasir

---

非常棒，对我很有效！！ - C Alonso C Ortega

Answer 1

在你的设置中，Button 使用 500 作为背景颜色。在你的配置文件中，你声明将对比度颜色设置为 #000000。将其设置为 #ffffff 即可完成。

对比度 属性告诉 Material 在什么颜色背景下选择什么颜色。因此，行 100: #000000 的意思是 "当背景是 100 时，使用 #000000 作为文本颜色"。这确保了文本的可读性。

Material 对它们的元素使用 3 种颜色阴影。这些颜色通过调用 mat-palette 来选择。

$my-primary: mat-palette($mat-my-green, 500, 50, 50);

这个调用告诉 Material 使用 500 作为"主"色调，50 作为较暗颜色，50 作为较亮颜色。因此按钮具有 500 颜色，然后对比度颜色被选为文本颜色。

要使文本在 500 上方显示为白色：

contrast: (50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
));

https://stackblitz.com/edit/angular-material-custom-theme-button-contrast-8ma1fp?file=styles.scss

- kvetis

---

谢谢，它可用！您能否解释一下它是如何工作的？我不能使用其他具有对比度下白色的数字，比如600、700吗？ - Yasir

@Yasir，我已经扩展了我的答案，试图更详细地解释一下。如果你接受这个答案，我会很高兴的。祝你编程好运。 - kvetis

嗨 @kvetis，我看到你对Angular Material主题非常感兴趣。你能帮我看看这个链接吗？我仔细阅读了你的回答，但对我没有起作用。我觉得只需要做一点小调整就可以解决了，但迄今为止还没有任何进展。谢谢。 - undefined