Angular Material：从主题提取深紫色设置mat-button-toggle背景色

我来帮你搞定这个问题～咱们先拆解下问题根源：你定义了$app-purple调色板，但没有把它整合到你的主题对象里，所以在mixin里用map-get($app-theme, warn)根本拿不到你想要的紫色——因为你的$app-theme创建时只传入了primary和accent，warn用的是框架默认值，不是你自定义的$app-purple。

具体修正步骤： #

1. 把自定义紫色调色板加入主题
   Angular Material的mat-light-theme接受三个参数：primary（主色）、accent（强调色）、warn（警告色）。你可以把$app-purple作为warn参数传入，这样主题对象里就包含了这个紫色调色板：

   $app-theme: mat-light-theme($app-primary, $app-primary-light, $app-purple);
   

   如果你不想占用warn的槽位，也可以扩展主题添加自定义调色板，但用内置的三个槽位是最贴合框架规范的做法。

2. 正确提取深紫色色调
   另外，你想要的是深紫色，建议直接用$mat-purple调色板（而不是你之前用的$mat-pink）来定义$app-purple，这样能更精准地获取深色调：

   // 用$mat-purple调色板，700就是标准深紫色
   $app-purple: mat-palette($mat-purple, 700, 500, 900);
   

完整修正后的代码： #

@import '~@angular/material/theming';
@include mat-core();

// 主调色板配置
$app-primary: mat-palette($mat-indigo);
$app-primary-light: mat-palette($mat-indigo, A200, A100, A400);
// 深紫色调色板（改用$mat-palette更贴合需求）
$app-purple: mat-palette($mat-purple, 700, 500, 900);

// 将紫色作为warn参数整合进主题
$app-theme: mat-light-theme($app-primary, $app-primary-light, $app-purple);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  // 从主题的warn槽位提取自定义紫色调色板
  $purple: map-get($app-theme, warn);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle.purple {
    // 直接用调色板的700色调（深紫色），也可以指定900拿到更深的颜色
    background-color: mat-color($purple);
    // 务必加上对比色，保证文字和背景区分开
    color: mat-color($purple, default-contrast);
  }
}

// 别忘了应用主题样式
@include angular-material-theme($app-theme);
@include mix-app-theme($app-theme);

额外提示： #

• mat-color($palette, hue)里的hue参数（比如700、900）对应调色板的深浅层级，你可以根据$mat-purple的预设值自由选择想要的深紫色调。
• 一定要添加对比色color: mat-color($purple, default-contrast)，避免按钮文字和背景色混在一起无法辨认。

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