最近在自己的个人项目里用到了 Angular Material 组件库，使用它的主题界面自然是少不了的，这里参照官方文档，先对 Material 默认主题的用法做一个归纳。默认所有项目都是用 Angular CLI 创建，确保项目有个统一规范的文件结构，方便用例阐述。

Angular Material 的主题系统包含了 “主题颜色”、“文字排版” 模块，都支持全面的自定义。不过咱们首先还是看看这两个模块里都包含什么内容，以及怎么使用默认预设的主题，实现 Material 组件库的开箱即用。

主题颜色

Angular Material 的主题颜色包含一组“调色盘”，用于组成 Material 组件的颜色。
所谓的“调色盘”，即按照 Material Design 的标准定义的多种颜色，每个颜色可以按（50，100，200…900）的层级，从浅到深调整色调（hue），得到不同的颜色值。

Material 颜色表

一个主题颜色由下面这几种类型组成：

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'。可用的预设主题有：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.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 的主题系统，咱们下一篇见😎！

Angular Material 主题系统（一）-- 基本使用

主题颜色

文字排版

使用预设主题

小结