material theme 自定义_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)，可以一键切换亮色和暗色风格的主题。这还蛮酷的，安排上‍！

所以这就需要去实现多主题切换了，咱们下一篇见！