Angular Material 18主题API中如何用参考令牌作为系统令牌值？

问题根源 #

Angular Material的M3主题生成器默认不会自动输出--md-ref-palette-*这类参考调色板CSS变量，即便源码包含生成逻辑，也需要你显式调用对应的SCSS工具来触发变量生成。

解决方案步骤 #

1. 修改主题配置文件
   找到生成主题时创建的主题文件（通常是src/theme.scss），在现有主题代码后添加参考调色板变量的生成逻辑：

@use '@angular/material' as mat;

// 保留原有主题定义
$primary-palette: mat.$m3-light-primary-palette;
$secondary-palette: mat.$m3-light-secondary-palette;
$tertiary-palette: mat.$m3-light-tertiary-palette;
$neutral-palette: mat.$m3-light-neutral-palette;
$neutral-variant-palette: mat.$m3-light-neutral-variant-palette;

$theme: mat.define-m3-theme((
  color: (
    primary: $primary-palette,
    secondary: $secondary-palette,
    tertiary: $tertiary-palette,
    neutral: $neutral-palette,
    neutral-variant: $neutral-variant-palette
  ),
  typography: mat.define-m3-typography-config(),
  density: 0
));

@include mat.core();
@include mat.all-component-themes($theme);
@include mat.m3-theme-vars($theme); // 确保系统变量输出（生成器已添加则保留）

// 新增：输出参考调色板变量到:root
:root {
  @include mat.md-ref-palette-vars($primary-palette, 'primary');
  @include mat.md-ref-palette-vars($secondary-palette, 'secondary');
  @include mat.md-ref-palette-vars($tertiary-palette, 'tertiary');
  @include mat.md-ref-palette-vars($neutral-palette, 'neutral');
  @include mat.md-ref-palette-vars($neutral-variant-palette, 'neutral-variant');
}

2. 在styles.scss中使用参考令牌配置系统变量
   现在可以在全局样式文件中通过参考令牌覆盖系统令牌，无需硬编码颜色值：

:root {
  // 基于Material3规范用参考令牌自定义系统变量
  --sys-primary: var(--md-ref-palette-primary60);
  --sys-on-primary: var(--md-ref-palette-primary10);
  --sys-primary-container: var(--md-ref-palette-primary90);
  --sys-on-primary-container: var(--md-ref-palette-primary10);
  // 其他系统令牌可按需配置
}

关键说明 #

• md-ref-palette-vars是Angular Material提供的SCSS mixin，负责将调色板的每个色调转换为CSS变量，第二个参数用于指定变量前缀中的调色板名称（如'primary'对应--md-ref-palette-primary*）。
• 确保@include mat.m3-theme-vars($theme);存在，这是生成--sys-*系统令牌的关键代码，主题生成器选择启用系统变量时会自动添加。

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