理论的开发场景中，应用程序的文字排版不是变化无穷的，也经常须要自定义色彩来适配具体我的项目需要，这就须要去自定义 Material 的主题。
Angular Material 库的款式是采纳 Sass 开发的，简直全副写在了 mixin 中，定制起来非常容易，让整个主题零碎相当的灵便可配置。它也提供了很多的工具型 mixin 和函数，来帮忙咱们在编写本人的组件时，和 Material 的主题款式各自为政。

自定义主题

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

主题色彩配置

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

要创立色彩配置，只须要简略的三步：

在 theme 文件夹内新建一个 _custom-theme-config.scss 文件，用以保护主题的配置对象。下划线前缀代表它是用来被其余 Sass 文件引入的，稍后须要由 styles.scss 引入。
创立多个“调色盘”，用到的 mat-palette 函数，会依据传入的色彩对象（变量名="$mat-"+Material Desigin 色彩名），返回一个 Sass map，它蕴含同一种色彩，不同色调的色彩定义，让 Material 组件依据须要，去获得具体的色彩值。
传入 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 三个参数，返回一个文字层级的定义对象。

留神✨：字体定义须要加引号。

生成主题款式

在创立好色彩和文字排版的配置对象后，当初就轮到一起下锅，应用它们生成最终的主题了。

在根目录的 styles.scss 中引入刚刚创立的主题配置文件 _custom-theme-config.scss。
@include mat-core mixin，顾名思义，它蕴含了 Material 所有组件的通用款式。

留神✨：这个 mixin 只能引入一次，如果屡次引入，引入几次，最初编译失去的 css 里就会蕴含几份截然不同的通用款式，白白减少打包体积。

传入文字排版配置给 mat-core，生成款式
传入配置 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, $default: null)：依据主题对象，获取文字排版配置
mat-font-size($config, $level)：通过配置对象和层级，获取 font-size。
mat-line-height($config, $level)：通过配置对象和层级，获取 line-height。
mat-font-weight($config, $level)：通过配置对象和层级，获取 font-weight。
mat-font-family($config)：通过配置对象，获取 font-family。
mat-typography-level-to-styles($config, $level)：一个不便生成款式的 mixin，通过传入配置对象和层级，疾速生成一个 CSS 文字款式定义。

色彩开发工具

mat-contrast($palette, $hue)：通过调色盘和色调，获取它的反差色。
mat-color($palette, $hue: default, $opacity: null) ：从调色盘获取特定的色彩，能够指定色调和透明度。
mat-get-color-config($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 定义。

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

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

创立一个接管 “主题色彩配置对象” 的 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);  }}

创立另一个 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);    }  }}

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

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

// 引入 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），能够一键切换亮色和暗色格调的主题。这还蛮酷的，安顿上！
所以这就须要去实现多主题切换了，咱们下一篇见????！