Angular材质：创建自定义主题

在我们对 Angular Material 2 的介绍中，我们展示了如何使用其中一个预先构建的主题，但创建自定义主题同样容易。 这将允许您指定将在 Angular Material 组件上使用的 primary、accent 和 warning 颜色。

您的自定义主题将是一个 Sass 文件，在我们的例子中，我们将其命名为 theme.scss 并将其放在我们应用程序的 /src 文件夹中。

如果您的应用程序的其余部分不使用 Sass，请不要担心。 如果你使用 Angular CLI，你可以简单地将你的 Sass 文件添加到 .angular-cli.json 配置文件的样式列表中，Angular CLI 会处理编译css文件：

.angular-cli.json

"styles": [
  "styles.css",
  "theme.scss"
],

在主题文件中，您需要首先从 Angular Material 导入主主题 Sass 文件并包含基本样式：

主题.scss

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

接下来，您将使用 mat-palette 函数为您的主要颜色、重音颜色和警告颜色声明变量。

mat-palette 将颜色名称作为其第一个参数，其余可选的第二、第三和第四个参数定义默认值、较浅的值和较深的值。 颜色名称和值本身取自官方 Material Design 颜色指南：

主题.scss

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

我们通过创建一个 $my-app-theme 变量来完成，该变量将我们的颜色定义与 mat-light-theme 函数结合起来，最后包含调用 angular 的结果-material-theme 功能与我们的 $my-app-theme。

警告颜色是可选的，如果没有提供，则默认为红色。

附加和替代主题

如果您愿意，也可以通过在类中嵌套主题定义来创建替代主题。 然后，您只需将类名添加到模板中的父元素即可使备用主题生效。

这是我们的完整文件，带有备用主题：

主题.scss

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

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);
  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);

---

以下是我们的两个主题的外观：

app.component.html

<mat-card>
  Main Theme:
  <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>

<mat-card class="alternate-theme">
  Alternate Theme:
  <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>