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 作为 "main" 色度，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

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

angular material 2 custom theme button contrast

angular

angular-material2