角材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
    }}

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

Answer 1

按钮至少在您的设置中使用$$('#add_products').on('click', function() { 作为背景色。在您的配置中，您声明与500的对比色为500。将其设置为#000000，就可以了。

#ffffff属性告诉Material在颜色背景上选择哪种颜色。因此，contrast行的意思是“ 当背景为100: #000000时，请使用100作为文本颜色”。这样可以确保文本的可读性。

材料使用3种颜色阴影作为其元素。通过调用#000000选择这些颜色。

mat-palette

该调用告诉Material将$my-primary: mat-palette($mat-my-green, 500, 50, 50); 用作“主”阴影，将500用作较暗，将50用作较亮。因此，按钮的颜色为50，然后为文本选择了对比色。

要使文字超过500白色：

500

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