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

【问题标题】：How to use Angular Material custom- palette colors effectively Angular Material如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
【发布时间】：2019-04-04 23:20:01
【问题描述】：

我正在使用自定义材质调色板。使用其默认阴影、深色阴影、浅色阴影定义了主要和重音调色板，如下所示：

  $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-shades我们已将其用作主题初始设置的一部分。

2. 如何将调色板中的任何其他色调用于primary 或accent 色调。

【问题讨论】：

标签： angular angular-material2 color-palette

【解决方案1】：

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

主题.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

【讨论】：

【解决方案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">

一些我觉得有帮助的支持链接：

【讨论】：

【解决方案3】：

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

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

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

【讨论】：