实际的开发场景中，应用程序的文字排版不是一成不变的，也常常需要自定义颜色来适配具体项目需求，这就需要去自定义 Material 的主题。
Angular Material 库的样式是采用 Sass 开发的，几乎全部写在了 mixin 中，定制起来非常容易，让整个主题系统相当的灵活可配置。它也提供了很多的工具型 mixin 和 函数，来帮助我们在编写自己的组件时，和 Material 的主题样式步调一致。

自定义主题

首先，在 src 目录下创建一个 theme 文件夹以便后续管理自定义主题配置，然后咱们就开始一步一步完成主题的全面定制吧?！

主题颜色配置

自定义主题颜色，其实就是指定上一篇提到的几种“调色盘”，生成一套主题样式。必须指定的有主色（primary）和 强调色（accent），警告色（warn）可选，默认为红色。前景色（foreground）和背景色（background）会根据亮色或者暗色主题自动生成。

要创建颜色配置，只需要简单的三步：

1. 在 theme 文件夹内新建一个 _custom-theme-config.scss 文件，用以维护主题的配置对象。下划线前缀代表它是用来被其他 Sass 文件引入的，稍后需要由 styles.scss 引入。

2. 创建多个“调色盘”，用到的 mat-palette 函数，会根据传入的颜色对象（变量名="$mat-"+Material Desigin 颜色名），返回一个 Sass map，它包含同一种颜色，不同色调的颜色定义，让 Material 组件根据需要，去取得具体的颜色值。

3. 传入 mat-light-theme 或 mat-dark-theme 生成明亮或者暗黑风格的颜色主题。

示例代码：

// 使用系统预定义的颜色变量和 mixin 为自定义主题创建“调色盘”
// 所有可用的颜色可以在此查看: https://material.io/design/color/
$custom-app-primary: mat-palette($mat-indigo);

// 针对每个调色盘，可选的，可以指定“default”，“lighter”，“darker”，“text”的色调，方便后续取用
// 通常推荐默认为500，更亮为100，更暗为700
$custom-app-accent: mat-palette($mat-pink, A500, A100, A700, A900);

// 警告色是可以选的（默认是红色 $mat-red）
$custom-app-warn: mat-palette($mat-orange);

// 创建明亮风格的主题颜色配置对象
$custom-app-theme: mat-light-theme((
  color: (
    primary: $custom-app-primary,
    accent: $custom-app-accent,
    warn: $custom-app-warn,  
  )
));

现在颜色的配置就做好备用了，不急着下锅翻炒，咱们再看看文字排版的配置。

文字排版配置

和自定义主题颜色类似的，文字排版也是通过创建一个 Sass map 来自定义：

@import '~@angular/material/theming';

// 这里定义文字排版对象，自定义了字体、headline、body-1.
$custom-typography: mat-typography-config(
  $font-family: 'monospace',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
  ...
);

mat-typography-level 方法按顺序接收 font-size, line-height, 和 font-weight 三个参数，返回一个文字层级的定义对象。

注意✨：字体定义需要加引号。

生成主题样式

在创建好颜色和文字排版的配置对象后，现在就轮到一同下锅，使用它们生成最终的主题了。

1. 在根目录的 styles.scss 中引入刚刚创建的主题配置文件 _custom-theme-config.scss。

2. @include mat-core mixin，顾名思义，它包含了 Material 所有组件的通用样式。

注意✨：这个 mixin 只能引入一次，如果多次引入，引入几次，最后编译得到的 css 里就会包含几份一模一样的通用样式，白白增加打包体积。

4. 传入文字排版配置给 mat-core，生成样式

5. 传入配置 angular-material-theme，生成颜色主题样式

styles.scss 示例代码：

@import '~@angular/material/theming'; // 引入需要用到的 Material 工具
@import './theme/_custom-theme-config'; // 引入自定义主题配置

// 传入文字排版配置，注意这个 mixin 只能导入一次
@include mat-core($custom-typography); 

// 传入配置，生成颜色主题样式
@include angular-material-theme($custom-app-theme);

细粒度自定义

到目前为止，咱们已经完成了一个自定义主题。不过有的时候，可能项目还需要单独定制不同的 Material 组件颜色或是文字排版。好在 Material 相当的灵活，可以这样更细粒度的定制。

假设我们已经像上面的步骤一样，创建了另外两个配置文件：_another-color-config.scss 和 _another-typography-config.scss。

要自定义文字排版：

// 自定义文字排版的 CSS 类 (例如, mat-h1, mat-display-1, mat-typography 等).
@include mat-base-typography($another-typography-config);

// 给 Material 的特定组件自定义文字排版
@include mat-checkbox-typography($another-typography-config);

// 给所有 Material 组件以及 CSS 类自定义文字排版
@include angular-material-typography($another-typography-typography);

自定义组件颜色：

// 给特定的组件单独配置主题颜色
@include mat-core-theme($another-color-config); // 组件通用样式，例如涟漪效果
@include mat-button-theme($another-color-config); // 单独配置按钮
@include mat-checkbox-theme($another-color-config); // 单独配置 checkbox

让业务组件和主题一致

Material 提供了一套和 Material Design 有关的样式工具，包括variable、 函数和 mixin，来帮助咱们用于自己的业务组件中，使得整个应用，和 Material 保持风格一致。

文字排版工具

• mat-get-typography-config($theme,$theme,default: null)：根据主题对象，获取文字排版配置
• mat-font-size($config,$config,level)：通过配置对象和层级，获取 font-size。
• mat-line-height($config,$config,level)：通过配置对象和层级，获取 line-height。
• mat-font-weight($config,$config,level)：通过配置对象和层级，获取 font-weight。
• mat-font-family($config)：通过配置对象，获取 font-family。
• mat-typography-level-to-styles($config,$config,level)：一个方便生成样式的 mixin，通过传入配置对象和层级，快速生成一个 CSS 文字样式定义。

颜色开发工具

• mat-contrast($palette,$palette,hue)：通过调色盘和色调，获取它的反差色。

• mat-color($palette,$palette,hue: default, $opacity: null) ：从调色盘获取特定的颜色，可以指定色调和透明度。

• mat-get-color-config($theme,$theme,default: null)：根据主题对象，获取颜色配置

• 亮色风格（暗色同 key 值）前景色 map：

  $mat-light-theme-foreground: (
    base:              black,
    divider:           $dark-dividers,
    dividers:          $dark-dividers,
    disabled:          $dark-disabled-text,
    disabled-button:   rgba(black, 0.26),
    disabled-text:     $dark-disabled-text,
    elevation:         black,
    hint-text:         $dark-disabled-text,
    secondary-text:    $dark-secondary-text,
    icon:              rgba(black, 0.54),
    icons:             rgba(black, 0.54),
    text:              rgba(black, 0.87),
    slider-min:        rgba(black, 0.87),
    slider-off:        rgba(black, 0.26),
    slider-off-active: rgba(black, 0.38),
  );
  

• 亮色风格（暗色同 key 值）背景色 map：

  $mat-light-theme-background: (
    status-bar: map-get($mat-grey, 300),
    app-bar:    map-get($mat-grey, 100),
    background: map-get($mat-grey, 50),
    hover:      rgba(black, 0.04),
    card:       white,
    dialog:     white,
    disabled-button: rgba(black, 0.12),
    raised-button: white,
    focused-button: $dark-focused,
    selected-button: map-get($mat-grey, 300),
    selected-disabled-button: map-get($mat-grey, 400),
    disabled-button-toggle: map-get($mat-grey, 200),
    unselected-chip: map-get($mat-grey, 300),
    disabled-list-option: map-get($mat-grey, 200),
    tooltip: map-get($mat-grey, 700),
  );
  

适配业务组件

使用 Angular Material 提供的 Sass 工具，保持业务组件的主题样式和 Material 组件一致。
注意✨：业务组件的样式需要以 Sass 定义。

要适配业务组件的主题，主要分为三步：

1. 给业务组件创建一个的主题文件：_example-component.theme.scss。

2. 创建一个接收 “主题颜色配置对象” 的 mixin，输出业务组件的颜色配置。

   // 引入 Material 的 函数s 来创建主题.
   @import '~@angular/material/theming';
   
   @mixin example-color($config-or-theme) {
     // mat-get-color-config 可以自动判断，参数传主题对象，或者颜色配置对象都可以
     $config: mat-get-color-config($config-or-theme);
        
     // 从配置对象中提取颜色
     $background: map-get($config, background);
     $primary: map-get($config, primary);
     $accent: map-get($config, accent);
   
     // 组件具体的样式类
     .example-color {
       // 使用 mat-color 从调色盘提取特定色调的颜色值。
       background-color: map-get($background, base);
       border-color: mat-color($accent, lighter);
       color:map-contrast($primary, lighter);
     }
   }
   

3. 创建另一个 mixin，接收 “文字排版配置对象”，输出文字样式。

   @mixin example-typography($config-or-theme) {
          
     // 和颜色方法类似，参数传主题对象，或者文字排版配置对象都可以
     $config: mat-get-typography-config($config-or-theme);
   
     .example-typography {
       font: {
         family: mat-font-family($config, body-1);
         size: mat-font-size($config, body-1);
         weight: mat-font-weight($config, body-1);
       }
     }
   }
   

4. 创建第三个 mixin：example-carousel-theme($config-or-theme)，把这前两个 mixin 整合在其中。所有其他和主题无关的样式，放入这个组件独立的样式文件中，由组件的 styleUrl 直接引入。

5. 将业务组件的主题定义文件，引入根主题文件中：

   // 引入 Material 的 函数s 来创建主题.
   @import '~@angular/material/theming';
   
   // 引入 Material 通用样式.
   @include mat-core();
   
   // 定义应用程序的自定义主题
   $primary: mat-palette($mat-indigo);
   $accent:  mat-palette($mat-pink, A200, A100, A400);
   $theme: mat-light-theme((
     color: (
       primary: $primary,
       accent: $accent,
     )
   ));
   
   // 生成 Material 组件的主题样式
   @include angular-material-theme($theme);
   
   // 生成业务组件的主题样式
   @include example-carousel-theme($theme);
   

小结

本篇主要介绍了以下几点：

• 用 mat-palette 创建 “调色盘”，使用 mat-light-theme 或 mat-dark-theme 创建颜色配置对象。
• 用 mat-typography-config 创建字体定义，以及各个层级的文字排版配置。
• 文字配置传给 mat-core，颜色配置传给 angular-material-theme，生成最终的主题样式。
• 可以单独给指定的 Material 组件定义主题。
• 使用 Material 提供的工具集，让自己开发的业务组件，也能和主题风格保持一致。

现在很多网站都有了 “暗黑模式”（例如 Github），可以一键切换亮色和暗色风格的主题。这还蛮酷的，安排上‍！
所以这就需要去实现多主题切换了，咱们下一篇见?！