我已经有一个使用自定义原色的自定义主题。这完美地工作。现在我想为一些材质按钮添加绿色样式。
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>
我做错了什么?提前致谢。