头图

Angular Material 主题系统(二)-- 自定义主题

locotor

实际的开发场景中,应用程序的文字排版不是一成不变的,也常常需要自定义颜色来适配具体项目需求,这就需要去自定义 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-thememat-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-thememat-dark-theme 创建颜色配置对象。
  • mat-typography-config 创建字体定义,以及各个层级的文字排版配置。
  • 文字配置传给 mat-core,颜色配置传给 angular-material-theme,生成最终的主题样式。
  • 可以单独给指定的 Material 组件定义主题。
  • 使用 Material 提供的工具集,让自己开发的业务组件,也能和主题风格保持一致。

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

阅读 1.4k

玻璃晴朗,橘子辉煌

166 声望
1 粉丝
0 条评论

玻璃晴朗,橘子辉煌

166 声望
1 粉丝
文章目录
宣传栏