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

Question

我刚开始使用角度和角度材质主题，使用自定义调色板创建新主题。

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

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

标签： angularangular-material2

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);

该调用告诉 Material500用作“主要”阴影，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