全新 UI 震撼来袭！ng-matero v18 正式发布！

前言

断断续续折腾了近两周，ng-matero v18 终于发布了。其中最大的亮点是启用 Material 3 主题以及全新的 UI 设计。特别说明，这是 ng-matero 发布五年以来首次 UI 大改版！本文重点聊一下 Material 3 的使用方式以及 v18 的几个小变化。

仓库：https://github.com/ng-matero/ng-matero
预览：https://ng-matero.github.io/ng-matero/

如何使用 Material 3 主题

为了适配 M3，Angular Material 从 v16 开始对主题系统进行了大刀阔斧的改动。v16 将所有主题样式全部拆分到 CSS token 中；v17 在 Material 实验库中增加 M3 的 CSS token，提供实验性支持；v18 正式发布 M3 主题，所有 M2 主题配置都增加 m2- 前缀。

这些变化在用户层面是无感知的，使用 ng update 自动升级时，原有配置都会自动添加 m2- 前缀。使用 M3 主题的方式如下：

@use '@angular/material' as mat;

@include mat.core();

$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$violet-palette,
  ),
));

html {
  @include mat.all-component-themes($my-theme);
}

如果使用了 Material 的扩展组件库，则必须使用 mat.private-deep-merge-all 额外处理一下主题配置的合并。

@use '@angular/material' as mat;
@use '@ng-matero/extensions' as mtx;

...

$my-theme: mat.private-deep-merge-all(
  mat.define-theme($my-config),
  mtx.define-theme($my-config)
);

html {
  @include mat.all-component-themes($my-theme);
  @include mtx.all-component-themes($my-theme);
}

讲几句题外话，增加 M3 主题之后，Angular Material 的主题系统变得更加复杂，想要扩展 Material 的组件的难度也加大了。通过 define-theme 生成的配置项结构如下：

$theme: (
  _mat-theming-internals-do-not-access: (
    theme-version: 1,
    theme-type: light,
    palettes: (...),
    color-tokens: (...),
    typography-tokens: (...)
    ...
  )
)

所以，Material 扩展库的主题配置也必须使用 _mat-theming-internals-do-not-access 作为 key 才能融合到已有的主题系统中。如果有时间的话，我会专门写文章介绍 Angular Material 的主题系统。

如何自定义 Material 3 主题

在 Material 3 中，增加了一个 color roles 的概念（什么是 color roles?），主题定制就是更改这些颜色变量。

在 Angular Material 中，所有 color roles 都有对应的 CSS token，但是默认情况下，Angular Material 的组件都是从主题配置的调色盘中取色的，这些 CSS token 并不会暴露出来。如果想使用自定义主题，必须用下面的方式开启：

$my-material-app-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      use-system-variables: true, // 

标签：v18,主题,mat,Material,matero,ng,theme	

From： https://www.cnblogs.com/nzbin/p/18264665