向角度材质自定义主题添加新颜色时不应用颜色

时间:2021-01-27 18:12:14

标签: angular angular-material angular-material2

我已经有一个使用自定义原色的自定义主题。这完美地工作。现在我想为一些材质按钮添加绿色样式。

Current style for the primary colors of the buttons

Current style for the primary colors of the buttons: click effect

我想要的是将按钮的颜色(单击后)更改为绿色,但我认为我必须像为自定义原色所做的那样创建一个调色板,但我无法将绿色设置为样式按钮。

@import '~@angular/material/theming';

@include mat-core();

$md-mcgpalette0-blue: (
    50 : #e7f0fe,
    100 : #c2dafe,
    200 : #9ac1fd,
    300 : #71a8fc,
    400 : #5296fb,
    500 : #3483fa,
    600 : #2f7bf9,
    700 : #2770f9,
    800 : #2166f8,
    900 : #1553f6,
    A100 : #ffffff,
    A200 : #f2f5ff,
    A400 : #bfcfff,
    A700 : #a6bbff,
    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,
    )
);

$md-green: (
    50 : #e0f4ea,
    100 : #b3e4cb,
    200 : #80d3a8,
    300 : #4dc185,
    400 : #26b36a,
    500 : #00a650,
    600 : #009e49,
    700 : #009540,
    800 : #008b37,
    900 : #007b27,
    A100 : #a8ffbc,
    A200 : #75ff95,
    A400 : #42ff6e,
    A700 : #29ff5a,
    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,
    )
);

$web-primary: mat-palette($md-mcgpalette0-blue);
$web-accent: mat-palette($mat-pink, A200, A100, A400);

$web-warn: mat-palette($mat-red);

$web-green: mat-palette($md-green);

$web-theme: mat-light-theme((
  color: (
    primary: $web-primary,
    accent: $web-accent,
    warn: $web-warn,
    green: $web-green
  )
));

@include angular-material-theme($web-theme);

这个想法是通过绑定材质按钮的属性颜色来改变按钮的颜色/样式,但是我上面定义的绿色完全被忽略了。

<button mat-stroked-button color="primary">Execute</button>
<button mat-stroked-button color="green">Execute</button>

我做错了什么?提前致谢。

0 个答案:

没有答案