关于前端:Angular-Material-主题系统二-自定义主题

理论的开发场景中，应用程序的文字排版不是变化无穷的，也经常须要自定义色彩来适配具体我的项目需要，这就须要去自定义 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），能够一键切换亮色和暗色格调的主题。这还蛮酷的，安顿上‍！
所以这就须要去实现多主题切换了，咱们下一篇见????！

关于前端:Angular-Material-主题系统二-自定义主题

自定义主题

主题色彩配置

文字排版配置

生成主题款式

细粒度自定义

让业务组件和主题统一

文字排版工具

色彩开发工具

适配业务组件

小结