如何获取当前主题调色板的对比度色调（无需硬编码Hue值）

当然可以！你现在硬编码500作为mat-contrast的色调参数其实是多余的——Angular Material的mat-contrast函数本身就支持自动使用调色板的默认色调（也就是你创建调色板时指定的那个色调）来获取对应的对比度颜色，不需要手动硬编码。

原理说明 #

当你用mat-palette()创建调色板时，返回的映射对象里包含两个关键信息：

• default：存储你指定的默认色调（比如你定义$green: mat-palette($mat-green, A400)时，这个值就是A400；如果没指定色调，默认是500）。
• contrast：存储每个色调对应的对比度颜色映射。

而mat-contrast函数的第二个参数默认值就是map-get($palette, default)，也就是说，只要不传第二个参数，它会自动匹配你当前调色板的默认色调。

修改后的代码 #

把你的style-theme混合宏修改成这样即可：

@mixin style-theme($theme) {
  $p: map-get($theme, primary);
  $a: map-get($theme, accent);
  $w: map-get($theme, warn);

  $primary: mat-color($p);
  $accent: mat-color($a);
  $warn: mat-color($w);

  // 自动使用调色板的默认色调获取对比度
  $primary-contrast: mat-contrast($p);
  $accent-contrast: mat-contrast($a);
  $warn-contrast: mat-contrast($w);

  // 后续可以正常使用这些变量来应用样式
}

进阶：手动指定特定色调的对比度 #

如果你需要获取调色板中某个特定色调的对比度（而非默认色调），也可以直接从调色板的contrast映射中读取，完全避免硬编码：

// 比如获取primary调色板中A200色调的对比度
$primary-a200-contrast: map-get(map-get($p, contrast), A200);

这样修改后，你的代码会更灵活，无论你定义的调色板使用什么默认色调，都能自动匹配对应的对比度颜色，不用再手动调整硬编码的数值。

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