极客教程如何在Angular中使用自定义主题调色板
我们可以在angular中使用自定义主题调色板来定义我们自己的调色板。而这个主题文件可以在所有的组件中使用。
步骤:
首先，我们必须创建我们自己的主题文件，在这个文件中，我们必须包括mat-core() Sass mixin并从angular material中导入主题文件。之后，我们必须开始建立我们的调色板，最后，我们必须在 “angular-material-theme “中包含我们创建的主题文件。在这之后，我们可以通过导入 “style.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);
在mat-palette里面，我们必须定义与亮度有关的值。默认值是500（这是我的品牌色/中心色的真实色调）。其余的是该颜色的其他色调（数字越小意味着越亮，数字越大意味着越暗）。同样，数字越低意味着越亮，数字越高意味着越暗。
现在，我们可以通过两种方式来创建调色板。
- light
- dark
在上面的例子中，我们使用了一个轻型主题，然后我们在 “angular-material-theme “中包含了特定的主题。
<html>
<mat-card class="my-alternate-theme">
My Themes:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warning</button>
</mat-card>
</html>
输出:
