Angular Material M3(v18)生成主题代码解析与问题咨询

$_palettes: (
  primary: (
    0: #000000,
    10: #001a43,
    20: #002d6c,
...

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    // use-system-variables: true,
  ),
  typography: (
    plain-family: 'Roboto, sans-serif',
    brand-family: 'Roboto, sans-serif',
    // use-system-variables: true,
  ),
));

1. 为何不能直接赋值secondary到主题配置？ #

Angular Material M3的主题结构要求，传递给primary/tertiary的映射必须包含全套基础调色板（secondary、neutral、neutral-variant、error）。这是因为M3组件的样式逻辑会从当前主题的主调色板上下文中读取这些关联配色的值，确保组件能获取到完整的配色体系。

如果直接给主题color配置单独加secondary: map.get($_palettes, secondary)，组件将无法正确读取neutral、error等关联配色——M3的主题模型不再像M2那样拆分单独的调色板配置，而是要求主调色板映射整合全套关联调色板数据。

2. 主题配置中如何存储自定义颜色？ #

M3主题系统没有内置的“自定义颜色”字段，但可以通过两种方式实现：

• 扩展调色板映射：在$_palettes里新增自定义调色板项，比如custom-accent: (50: #xxx, 100: #xxx...)，然后合并到$_primary中，之后通过mat.get-color-from-palette(map.get($light-theme, color), custom-accent, 50)这类函数调用。
• 定义全局SCSS变量：直接在主题文件里写$custom-color: #xxxxxx，在组件样式里直接引用即可，适合不需要多色调的单一自定义色。

3. M3中如何让h2、h3等元素应用主题字体族？ #

M3移除了mat-typography全局类，可通过以下两种方法实现全局字体应用：

• 自定义全局样式：在全局样式文件（如styles.scss）中针对HTML标签设置字体，读取主题的字体族变量：

  @use '@angular/material' as mat;
  
  body, h1, h2, h3, h4, h5, h6, p, span {
    font-family: mat.get-typography-config($light-theme, plain-family);
  }
  

• 扩展M3排版配置：通过mat.define-typography-config自定义排版规则，引用到主题后生成全局排版样式：

  $custom-typography: mat.define-typography-config(
    $plain-family: 'Roboto, sans-serif',
    $headline-2: mat.define-typography-level(32px, 40px, 700),
    // 按需配置其他层级
  );
  
  $light-theme: mat.define-theme((
    typography: $custom-typography,
  ));
  
  // 生成全局排版样式，对基础标签生效
  @include mat.typography-hierarchy($custom-typography);
  

第二种方法更贴合M3设计体系，可同时控制字体大小、权重等样式，不只是字体族。

内容的提问来源于stack exchange，提问作者MarcS82