Angular Material 主题系统（二）-- 自定义主题

头像
locotor
    阅读 6 分钟
    2
    头图

    实际的开发场景中，应用程序的文字排版不是一成不变的，也常常需要自定义颜色来适配具体项目需求，这就需要去自定义 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 里就会包含几份一模一样的通用样式，白白增加打包体积。

    1. 传入文字排版配置给 mat-core，生成样式
    2. 传入配置 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 定义。

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

    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），可以一键切换亮色和暗色风格的主题。这还蛮酷的，安排上‍！
    所以这就需要去实现多主题切换了，咱们下一篇见😎！

    angular-materialangular前端
    locotor
    177 声望2 粉丝

    玻璃晴朗，橘子辉煌

    « 上一篇
    Angular Material 主题系统（一）-- 基本使用
    下一篇 »
    Angular Material 主题系统（三）--多主题切换

    引用和评论

    推荐阅读
    头像
    详解 Angular 动态视图 (二) -- CDK Portal

    locotor阅读 2.4k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.7k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 4.2k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 5阅读 849

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.3k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.4k

    0 条评论
    得票最新