Question

我正在使用自定义的材料调色板。定义了主要和重点调色板，其默认阴影，暗阴影，浅阴影如下：

  $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的颜色阴影，那么问题是，如何使用{{1 }}和lighter阴影，我们已将其用作主题初始设置的一部分。

2。。如何将调色板中的任何其他阴影用于darker或primary阴影。

Answer 1

检查我在下面编写的代码。检查注释行的使用情况

Theme.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

Answer 2

据我所知，没有简单的方法可以通过简单地修改HTML来使用自定义调色板中的非默认阴影（即<button color="primary-lighter">不起作用）。

我找到的最简单的方法是在Theme.scss文件中包括自定义主题，例如：

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

一些对我有用的支持链接：

Answer 3

我在材质阴影方面也有类似的问题。由于我在网络中找不到解决方案（省略了使用将引用其他主题的类的可能性），因此我使用了普通的scss内置函数，如下所示：

@import "./../../my-theme.scss";

a{
 color: darken($accent, 30%);
}

如何有效使用Angular Material自定义调色板颜色Angular Material

3 个答案: