angular material 2 自定义主题按钮对比

Question

我刚开始使用 angular 和 angular material 主题，使用自定义调色板创建了新主题。

生成自定义调色板我使用了这个工具 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
    }}

这有效，但我认为这不是一个好的解决方案
另一个问题是步进组件步数也有对比问题

Answer 1

按钮用途 500作为背景颜色 - 至少在您的设置中。在您的配置中，您将对比色声明为 500是 #000000 .将其设置为 #ffffff你可以走了。
contrast属性告诉 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