Angular Material 3中如何配置全部6种自定义调色板？

Angular Material 3的mat.define-theme函数虽官方示例仅展示了primary和tertiary，但实际上支持传入完整的颜色配置对象，包含你需要的所有6种调色板。以下是具体实现步骤：

1. 定义所有自定义调色板 #

首先用mat.define-palette（或自定义色值结构）创建6种调色板：

// 自定义调色板示例（可替换为你自己的色值）
$custom-primary: mat.define-palette(mat.$indigo-palette, 500, 100, 700);
$custom-secondary: mat.define-palette(mat.$pink-palette, 500, 100, 700);
$custom-tertiary: mat.define-palette(mat.$teal-palette, 500, 100, 700);
$custom-error: mat.define-palette(mat.$red-palette, 500, 100, 700);
$custom-neutral: mat.define-palette(mat.$gray-palette, 500, 100, 900);
$custom-neutral-variant: mat.define-palette(mat.$blue-gray-palette, 500, 100, 900);

2. 构建完整的颜色配置对象 #

将所有调色板整合到一个配置对象中，可按需添加对比度文本设置：

$custom-color-config: (
  primary: $custom-primary,
  secondary: $custom-secondary,
  tertiary: $custom-tertiary,
  error: $custom-error,
  neutral: $custom-neutral,
  neutral-variant: $custom-neutral-variant,
  // 可选：配置各调色板的对比度文本颜色
  contrast: (
    primary: mat.$dark-theme-text,
    secondary: mat.$light-theme-text,
    error: mat.$light-theme-text
  )
);

3. 定义并应用完整主题 #

将颜色配置传入mat.define-theme，同时配置排版和密度，最后应用到所有组件：

// 定义完整主题
$custom-theme: mat.define-theme(
  (
    color: $custom-color-config,
    typography: mat.define-typography-config(), // 可自定义排版规则
    density: mat.define-density-config() // 可自定义组件密度
  )
);

// 应用主题到所有Material组件
@include mat.all-component-themes($custom-theme);

4. 在组件中使用自定义调色板 #

通过mat.color函数调用任意调色板的颜色值：

// 示例：用secondary调色板主色调做背景
.secondary-bg {
  background-color: mat.color($custom-theme, secondary);
}

// 示例：用neutral-variant浅色调做文本颜色
.neutral-variant-text-light {
  color: mat.color($custom-theme, neutral-variant, 100);
}

关键说明 #

Material 3的主题系统底层支持所有标准调色板类型，官方文档的示例仅展示常用项，并非限制。只要颜色配置对象符合MatColorConfig接口结构，就能被正确识别和应用。

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