如何在Angular Material中使用内置主题颜色？语法及文档咨询

一、mat-color 与旧版用法说明 #

mat-color 是 Angular Material 早期版本提供的 Sass 函数，用于从主题映射中提取指定颜色值。你看到的旧版代码（map-get($theme, foreground) 这类写法）在当前 Angular Material 15+ 版本已被废弃，现在官方推荐使用更贴合 Material Design 3 的新 Sass API。

二、内置 indigo-pink 主题的颜色引用方法 #

1. 直接使用官方预定义 CSS 类（最简单）

不需要写自定义样式，直接给元素添加 Angular Material 提供的颜色类即可：

• 设置背景为 Primary Container：给 div 添加 mat-mdc-primary-container 类
• 设置文本为主题主色：添加 mat-primary 类
• 其他常用类：
  • mat-mdc-secondary-container：次要色容器背景
  • mat-mdc-warn-container：警告色容器背景
  • mat-secondary：次要色文本/边框
  • mat-warn：警告色文本/边框

示例：

<div class="mat-mdc-primary-container">
  这是背景为 Primary Container 的内容
</div>

2. 在自定义 Sass/CSS 中引用颜色值

如果需要在自己的样式文件中动态引用主题颜色，可通过以下方式：
首先导入 Angular Material 的主题工具：

@import '@angular/material/theming';

然后调用新的 Sass 函数提取颜色：

// 获取 indigo-pink 主题的主色调板
$primary-palette: mat.get-theme-primary-palette($indigo-pink-theme);
// 获取 Primary Container 颜色（对应你说的 Primary90）
.primary-container-custom {
  background-color: mat.get-color-from-palette($primary-palette, 'container');
}

// 获取警告色
.warn-text {
  color: mat.get-theme-color($indigo-pink-theme, 'warn');
}

三、常用颜色角色（替代旧版“魔法字符串”） #

对应旧版的 foreground、secondary-text 等，现在 Material Design 3 定义了标准化的颜色角色，常用的包括：

• 主题颜色类：primary、primary-container、secondary、secondary-container、warn、warn-container
• 前景颜色类：on-primary（主色背景上的文本色）、on-secondary、on-warn、body-text、hint-text、disabled-text
• 中性色类：surface、surface-variant、background、error

这些角色既可以通过 Sass 函数调用，也可以通过对应的 mat-mdc-xxx CSS 类直接使用。

四、官方文档参考 #

官方文档的「Theming」章节详细说明了主题颜色的使用方法，包括颜色角色定义、Sass API 用法、内置主题的适配等内容，你可以在官方文档内搜索「Angular Material theming」找到对应板块。

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