设置Angular Material的自定义主题

环境

$ ng -v
@angular/cli: 1.4.9
node: 8.1.3
os: darwin x64

...
    "@angular/material": "^2.0.0-beta.12",

原项目的说明

我会参考已经导入Angular Material的项目来进行操作。

在app.module.ts中，假设已经导入了以下的Angular Material组件。

import { MatToolbarModule, MatButtonModule } from '@angular/material';

另外，在 style.scss 中，已经设置了预定义主题 indigo-pink。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

外貌看起来是这样的↓

创建并应用主题

创建一个用于主题的scss文件。

本次，我们会在 src/theme/ 下创建一个名为 my-theme.scss 的文件。
并且，如下所示，导入并应用 Angular Material 的基础样式。
※ 无论项目中使用何种扩展名的 CSS 文件，主题文件的扩展名都将设置为 .scss。

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

使用 mat-palette 工具分别定义 primary、accent 和 warn 的颜色。
传递给 mat-palette 的颜色变量已在以下位置定义：
material2/src/lib/core/theming/_palette.scss

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

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

@include angular-material-theme($orange-theme);

使用mat-light-theme或mat-dark-theme来定义最终的主题，然后将该变量传递给angular-material-theme mixin。

// ...
$orange-theme: mat-light-theme($orange-theme-primary, $orange-theme-accent, $orange-theme-warn);

@include angular-material-theme($orange-theme);

Angular CLI的配置

在 angular-cli 中，设置编译当前创建的 scss 文件。在 styles 部分指定文件名称。

"styles": [
  "styles.css",
  "theme/my-theme.scss"
],

确认适用后

我认为已经应用了设置的主题，如下所示。

请参考

以下是三个关于Angular Material的网站链接：

1. https://material.angular.io/guide/theming
2. https://alligator.io/angular/angular-material-custom-theme/
3. https://material.io/guidelines/style/color.html