我使用的是自定义材质调色板。定义了主调色板和强调调色板的默认色调、较深色调和较浅色调，如下所示：
$my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent: mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn: mat-palette($md-warn);
/*finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function,*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
/* and finally include the result of calling the angular-material-theme function with our $my-app-theme.*/
@include angular-material-theme($my-app-theme);
问题：
1。如果我在代码color="primary"或color="accent"中使用它来设置default的色调，问题是，如何使用lighter和darker的色调，这些色调是我们作为主题初始设置的一部分使用的。
2.如何将调色板中的任何其他色调用于primary或accent色调。
检查我在下面写的代码。检查注释行的用法
主题.scss
$my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent: mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn: mat-palette($md-warn);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives light theme
$my-app-dark-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives dark version of the above theme
//apply this class to any element you want to apply dark theme or set class to <body> so apply it to whole site
.dark-theme {
@include angular-material-theme($my-app-dark-theme);
}
@include angular-material-theme($my-app-theme); //default theme
据我所知，没有简单的方法可以通过修改HTML来使用自定义调色板中的非默认色调(即<button color="primary-lighter">不起作用(。
我发现的最简单的方法是在Theme.scs文件中包含自定义主题，例如：
$my-accentpalette: ( 50 : #f9f2eb, ... A700 : #ffae71, contrast: ( 50 : #000000, ..., A700 : #000000, ) );
.lighter-style {
background-color: mat-color($my-accentpalette, 200);
color: mat-contrast($my-accentpalette, 200);
}
(请注意，我刚刚从调色板中选择了"200"条目，可以随意选择(。然后，您可以将样式应用于任何您想要的HTML元素：
<button class="lighter-style">
我发现一些有用的支持链接：
- 如何在Angular中使用自定义主题调色板
- 材料2 paletta对比色
我在材质角度阴影方面也有类似的问题。由于我在web中找不到解决方案(省略了使用引用其他主题的类的可能性(，我使用了正常的scs内置功能，如以下所示：
@import "./../../my-theme.scss";
a{
color: darken($accent, 30%);
}