在介绍ANGLING MATERIAL 2，]时，我们展示了如何使用一个预构建的主题，但创建自定义主题同样简单。这将允许您指定将在角度材质组件上使用的主色、重点色和警告色。
您的定制主题将是一个Sass文件，在我们的例子中，我们将其命名为heme.scss，并将其放置在应用程序的/src文件夹中。
如果你的应用程序的其余部分没有使用Sass，也不用担心。如果您使用的是ANGLING CLI，，则只需将您的SASS文件添加到.arting-cli.json配置文件中的样式列表中，ANGLE CLI将负责编译该css文件：
1[label .angular-cli.json]
2"styles": [
3 "styles.css",
4 "theme.scss"
5],
在主题文件中，你需要首先从Angular Material导入主主题Sass文件，并包含基本样式：
1[label theme.scss]
2@import '~@angular/material/theming';
3@include mat-core();
接下来，您将使用mat-Palette函数声明主要颜色、强调颜色和警告颜色的变量。
mat-Palette 以颜色名称作为其第一个参数，其余可选的第二、三、四个参数定义了一个默认值、一个较亮的值和一个较暗的值。颜色名称和值本身取自官方材料设计颜色guidelines：
1[label theme.scss]
2$my-app-primary: mat-palette($mat-blue-grey);
3$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
4$my-app-warn: mat-palette($mat-deep-orange);
5
6$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
最后，我们创建了一个$my-app-heme变量，该变量将我们的颜色定义与mat-light-heme函数组合在一起，最后将调用角度-材质-主题函数的结果与我们的$my-app-heme包含在一起。
<$>[注意]警告颜色是可选的，如果没有提供，则默认为红色。<$>
附加和备用主题
如果您想通过在类中嵌套主题定义来创建替代主题，也可以这样做。然后，您只需将类名添加到模板中的父元素中，以使替代主题生效。
这是我们的完整文件，还有一个替代主题：
1[label theme.scss]
2@import '~@angular/material/theming';
3@include mat-core();
4
5$my-app-primary: mat-palette($mat-blue-grey);
6$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
7$my-app-warn: mat-palette($mat-deep-orange);
8$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
9@include angular-material-theme($my-app-theme);
10.alternate-theme {
11 $alternate-primary: mat-palette($mat-light-blue);
12 $alternate-accent: mat-palette($mat-yellow, 400);
13 $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);
下面是我们的两个主题：
1[label app.component.html]
2<mat-card>
3 Main Theme:
4 <button mat-raised-button color="primary">
5 Primary
6 </button>
7 <button mat-raised-button color="accent">
8 Accent
9 </button>
10 <button mat-raised-button color="warn">
11 Warning
12 </button>
13</mat-card>
14
15<mat-card class="alternate-theme">
16 Alternate Theme:
17 <button mat-raised-button color="primary">
18 Primary
19 </button>
20 <button mat-raised-button color="accent">
21 Accent
22 </button>
23 <button mat-raised-button color="warn">
24 Warning
25 </button>
26</mat-card>