Angular Material 3默认色调及按钮自定义色调设置咨询

1. Angular Material 3 的默认色调是什么？ #

Angular Material 3 遵循 Material Design 3 规范，默认主题的核心色调如下：

• 主色调（Primary）：基于紫色系的 #6750A4，包含从 50 到 900 的渐变色阶
• 次要色调（Secondary）：浅紫色系的 #958DA5
• 第三色调（Tertiary）：偏红紫的 #B58392
• 中性色调（Neutral）：覆盖从浅灰 #F5F5F5 到深灰 #1D1B20 的全灰度渐变

2. 是否支持直接使用 color="primary-200" 为 Material 按钮设置非默认色调？ #

不支持直接通过 color="primary-200" 这种写法设置按钮色调。Angular Material 组件的 color 属性仅接受预定义的主题关键词，包括 primary、secondary（或 accent）、warn，以及 Material 3 新增的 tertiary、neutral、neutral-variant 等。

若要使用主色调中的 200 色阶，需通过自定义主题实现：

1. 在主题文件中定义包含目标色阶的调色板
2. 创建自定义样式类，将该色阶应用到按钮的背景、文本等属性
3. 在按钮组件上添加自定义样式类

示例 SCSS 代码：

@import '@angular/material/theming';

@include mat.core();

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

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

// 自定义按钮样式
.btn-primary-200 {
  background-color: mat.get-color-from-palette($my-primary, 200);
  color: mat.get-color-from-palette($my-primary, 800); // 保证文本对比度
  // 可补充 hover、active 等状态样式
}

模板使用示例：

<button mat-button class="btn-primary-200">自定义色调按钮</button>

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