Angular Material中tertiary color的实际UI应用位置及相关疑问

一、为什么两个按钮外观一致？ #

Angular Material的标准组件（包括mat-button）默认只会使用主题中的primary、accent、warn三类颜色，根本不会读取tertiary颜色配置。你给按钮添加了包含不同tertiary的主题类，但组件本身没有逻辑去应用这个颜色，所以两个按钮外观完全相同。

如果想让元素用到tertiary颜色，需要手动通过Angular Material的颜色工具函数引用tertiary调色板的颜色值，比如修改你的CSS：

.one {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$magenta-palette,
      tertiary: mat.$red-palette,
    ),
  ));
  /* 手动将tertiary主色应用为按钮背景 */
  background-color: mat.get-color-from-palette(mat.$red-palette, 500);
  color: white;
}

.two {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$magenta-palette,
      tertiary: mat.$yellow-palette,
    ),
  ));
  /* 手动将tertiary主色应用为按钮背景 */
  background-color: mat.get-color-from-palette(mat.$yellow-palette, 500);
  color: rgba(0, 0, 0, 0.87);
}

二、关于tertiary颜色的两个疑问 #

1. 为什么主题配置提供tertiary选项？
   tertiary是Angular Material为开发者预留的扩展颜色槽，用于自定义设计系统时增加第三组品牌/功能色。它能让你在统一的主题体系下管理更多颜色，不用额外定义独立的调色板变量，保持样式系统的一致性。

2. 预设主题中的tertiary颜色应用在哪里？
   预设主题里的tertiary颜色（比如Rose & Red中的Red、Azure & Blue中的Blue）默认不会被任何Material标准组件使用。这些颜色是为开发者提供的现成扩展调色板，你可以根据设计需求将其用于：

• 自定义组件的颜色样式
• 特殊状态标识（比如区别于warn的另一种错误提示色）
• 品牌辅助色（比如强调特定功能区块）
• 其他需要第三组颜色体系的场景

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