如何全局替换Angular组件的默认紫色为自定义颜色？

Angular Material的默认紫色是主题的primary（主色调），要全局替换无需逐个修改组件，推荐用官方的主题定制方案，以下是具体实现方式：

方法一：自定义完整主题（官方推荐） #

在项目的全局样式文件（通常是src/styles.scss）中引入Material主题并自定义调色板：

@import '@angular/material/theming';

// 1. 定义自定义调色板
// 可以直接使用Material内置调色板（如$mat-blue、$mat-green），也可以传入自定义HEX值
$my-primary: mat-palette($mat-blue); // 替换为主色调，比如蓝色
$my-accent: mat-palette($mat-amber); // 替换为强调色
$my-warn: mat-palette($mat-red); // 警告色保持默认或自定义

// 2. 创建主题（浅色主题用mat-light-theme，深色用mat-dark-theme）
$my-app-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

// 3. 将主题应用到整个应用
@include angular-material-theme($my-app-theme);

如果需要完全自定义颜色值，可直接传入HEX：

$my-custom-primary: mat-palette($mat-palette, #2196f3, #bbdefb, #1976d2);

方法二：通过CSS变量快速覆盖 #

Angular Material（v15+）会将主题色映射为全局CSS变量，可直接在全局样式中修改：

:root {
  --mdc-theme-primary: #2196f3; /* 主色调 */
  --mdc-theme-on-primary: #ffffff; /* 主色调上的文字颜色 */
  --mdc-theme-secondary: #ffc107; /* 强调色 */
  --mdc-theme-on-secondary: #000000; /* 强调色上的文字颜色 */
}

旧版本（v14及以下）的CSS变量名略有不同，可通过Chrome审查工具查找对应的变量（如--mat-primary）。

注意事项 #

• 确保全局样式文件已在angular.json的styles数组中正确配置，作为全局样式引入；
• 如果组件有局部样式优先级冲突，可在全局样式中使用!important临时解决（不推荐长期使用，优先通过主题定制解决）。

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