最近在自己的个人项目里用到了 Angular Material 组件库，使用它的主题界面自然是少不了的，这里参照官方文档，先对 Material 默认主题的用法做一个归纳。默认所有项目都是用 Angular CLI 创建，确保项目有个统一规范的文件结构，方便用例阐述。
Angular Material 的主题系统包含了 “主题颜色”、“文字排版” 模块，都支持全面的自定义。不过咱们首先还是看看这两个模块里都包含什么内容，以及怎么使用默认预设的主题，实现 Material 组件库的开箱即用。
主题颜色
Angular Material 的主题颜色包含一组“调色盘”，用于组成 Material 组件的颜色。
所谓的“调色盘”，即按照 Material Design 的标准定义的多种颜色，每个颜色可以按（50，100，200…900）的层级，从浅到深调整色调（hue），得到不同的颜色值。
一个主题颜色由下面这几种类型组成：
- primary：主要颜色，广泛应用于应用的各个位置。
- accent：强调色，用于 Material 独特的“FAB（浮动操作按钮）”，以及强调交互的部分。
- warn：警告色，用于表示错误和警告状态。
- foreground：前景色，用于文本和图标。
- background：背景色，用于元素背景。
文字排版
Angular Material 的文字排版基于 Material 设计规范，定义了多个层级，每个层级由 font-size，line-height 和 font-weight 三个样式配置组成。
定义的层级有：
| 层级 | css 类 | 描述 |
|---|---|---|
| display-1 ~ display-4 | .mat-display-1 ~ .mat-display-4 | 巨大，一次性的标题性文字，常用于首页顶部 |
| headline | .mat-h1, .mat-headline | 与 <h1> 标签对应的小节的头部 |
| title | .mat-h2, .mat-title | 与 <h2> 标签对应的小节的头部 |
| subheading-2 | .mat-h3, .mat-subheading-2 | 与 <h3> 标签对应的小节的头部 |
| subheading-1 | .mat-h4, .mat-subheading-1 | 与 <h4> 标签对应的小节的头部 |
| body-1 | .mat-body, .mat-body-1 | 基本的正文文本 |
| body-2 | .mat-body-strong, .mat-body-2 | 较粗的正文文本 |
| caption | .mat-small, .mat-caption | 较小的正文文本和提示文本 |
| button | 只用于组件中 | 按钮和链接 |
| input | 只用于组件中 | 表单输入字段 |
使用预设主题
Angular Material 预先构建了几个内置主题。 这几个 css 文件除了包含所有 Material 组件的通用样式以外，字体排版，主题颜色也定义在其中。因此，要使用 Material 组件库，只需在应用程序中引入其中一个单独的 css 文件即可。
在项目根目录下的 style.css 里直接引用 @import '@angular/Material/prebuilt-themes/主题名称.css'。可用的预设主题有：
- <font color=#673AB7>deeppurple</font>-<font color=#FFC107>amber</font>.css
- <font color=#3F51B5>indigo</font>-<font color=#E91E63>pink</font>.css
- <font color=#E91E63>pink</font>-<font color=#607D8B>bluegrey</font>.css
- <font color=#9C27B0>purple</font>-<font color=#4CAF50>green</font>.css
在使用前，需要把 300、400 和 500 weight 的 Roboto 字体包含进项目： <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
这样，所有的 Material 组件就可以按预设的颜色和文字排版呈现外观。同时，还可以给任意的原生元素设置 Material 的字体排版样式：
<h1 class="mat-display-1">Jackdaws love my big sphinx of quartz.</h1>
<h2 class="mat-h2">The quick brown fox jumps over the lazy dog.</h2>注意✨：默认情况下，引入的预设主题 css，不会影响除 Material 组件以外的任何元素。
- 如果应用程序内容未放置在
<mat-sidenav-container>这个页面布局容器组件内，则需要将.mat-app-background类添加到外层元素（例如<body>）中。 才能给应用设置 Material 主题背景色。 如果需要给应用程序全局设置 Material 的字体排版，需要给根节点的元素设置 mat-typography 类。例如：
<!-- 不受影响. --> <h1>This header is unstyled</h1> <!-- 所有的元素都会按 Material 的字体排版设置样式. --> <section class="mat-typography"> <h1>这个内容会应用 Material 的 headline 样式</h1> </section>
小结
Material 的主题系统简介包括：
- 主题颜色定义了“主色”，“强调色”，“警告色”，“前景色”，“背景色”，每种颜色是一个 “调色盘”，可以通过色调呈现不同深浅的颜色变化，让界面颜色富有层次而不杂乱。
- 文字排版按
font-size，line-height和font-weight三个样式，从大到小定义了多个层级，让 Material 组件的文字规格统一。 - 预设了四种主题，使用 Material 组件时，项目根目录的 style.css 直接引入其中一个 css 文件即可。若要让整个应用的文字排版和 Material 组件保持一致，只需要给根元素（如 body）添加
.mat-typography类。
不过实际开发里，除了直接用预设的组件外观，通常我们都需要定制自己的颜色搭配，字体排版，或是让 Material 组件外的其他业务组件，也和 Material 风格保持一致。
这就需要我们自定义 Material 的主题系统，咱们下一篇见😎！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。