如何在Angular中使用自定义主题调色板？

我们可以使用有角度的自定义主题调色板来定义我们自己的调色板。该主题文件可以在所有组件中使用。

方法：

首先，我们必须创建自己的主题文件，并且其中必须包含mat-core()Sass mixin并从有角度的材质中导入主题文件。之后，我们必须开始构建调色板，最后，必须将创建的主题文件包含在“ angular-material-theme”中。之后，我们可以通过将自定义调色板导入到“ styles.Scss”文件中来使用它，也可以直接将其导入任何组件中。

句法：

@import '~@angular/material/theming';
@include mat-core();

//Available color palettes: https://material.io/design/color/

$[variable_name]-app-primary: mat-palette([defining color]);
$[variable_name]-app-accent:  mat-palette([defining colors]);
$[variable_name]-app-warn:  mat-palette([defining colors]);

$[variable_name]-app-theme: mat-light-theme([primary color], [accent color], [warn color]);
(or)
$[variable_name]-app-theme: mat-dark-theme([primary color], [accent color], [warn color]);

@include angular-material-theme($[variable_name]-app-theme);

例子：

@import '~@angular/material/theming';
@include mat-core();
  
/* ======== Angular material custom themes ======== */ 
  
$my-custom-primary: mat-palette($mat-deep-purple);
$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
$my-custom-warn: mat-palette($mat-lime); //Optional
  
$my-custom-theme: mat-light-theme(
              $my-custom-primary, 
              $my-custom-accent, 
              $my-custom-warn);
  
@include angular-material-theme($my-custom-theme);

在垫板内部，我们必须定义与亮度有关的值。默认值为500(这是我的品牌颜色/重点色的真实阴影)。其余的是该颜色的其他阴影(较低的数字表示较亮的阴影，较高的数字表示较暗的阴影)。同样，较低的数字表示较亮，较高的数字表示较暗。

现在我们可以通过两种方式创建一个调色板：

• 光
• 黑暗的

在上面的示例中，我们使用了一个浅色主题，然后将特定主题包含在“ angular-material-theme”中。

   My Themes:
   Primary
   Accent
   Warning

输出：

参考： https：//material.angular.io/guide/theming