Angular 角度材质2自定义主题按钮对比度

我刚开始使用角度和角度材质主题，用自定义选项板创建了新主题

为了生成自定义调色板，我使用了这个工具

它工作得很好，但唯一的问题是我如何能有按钮文本颜色白色的绿色背景？我尝试了不同的数字，但都没用

$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
    }}

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

---

按钮使用

500

作为背景色-至少在您的设置中是这样。在配置中，您声明

500

的对比度颜色为

\000000

。将其设置为

#ffffff

，您就可以开始了

对比度

属性告诉材质在颜色背景上选择什么颜色。因此，行

100:#000000

表示“当背景为

100

时，使用

#000000

作为文本颜色”。这确保了文本的可读性

材质为其元素使用3种色调。这些颜色是通过调用

mat palete

来选择的

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

该调用告诉材质使用

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

---

谢谢，它很管用！！你能解释一下它是怎么工作的吗？“我不能使用其他白色数字，比如对比度为600、700的数字吗？”Yasir我扩展了我的答案，试图解释更多。如果你接受这个答案，我会很高兴的。祝你好运。为我工作出色！！