如何在Angular Material中使用调色板颜色？解决mat-color()失效问题

你直接用$web-primary作为颜色值是无效的，因为它是一个调色板对象，不是具体的颜色代码。Angular Material切换到Dart Sass的@use语法后，旧的mat-color()函数已不再适用，以下是两种可行的解决方案：

方案1：从调色板直接获取指定色调的颜色 #

使用mat.get-color-from-palette()函数，传入调色板变量和目标色调（可选，默认取500色调）：

@use '@angular/material' as mat;
@include mat.core();

$web-primary: mat.define-palette(mat.$indigo-palette);
$web-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$web-warn: mat.define-palette(mat.$red-palette);

$web-theme: mat.define-light-theme((
  color: (
    primary: $web-primary,
    accent: $web-accent,
    warn: $web-warn,
  )
));

// 自定义样式：取primary调色板的默认500色调
a {
  color: mat.get-color-from-palette($web-primary);
}

// 也可以指定具体色调，比如300或A200
// a {
//   color: mat.get-color-from-palette($web-primary, 300);
// }

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

方案2：从已定义的主题中获取颜色 #

如果想要遵循主题的配色逻辑（比如自动适配明暗主题），可以用mat.color()函数，传入主题变量和颜色类型（primary/accent/warn），还能附加色调关键词（如lighter/darker）或具体数值：

@use '@angular/material' as mat;
@include mat.core();

$web-primary: mat.define-palette(mat.$indigo-palette);
$web-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$web-warn: mat.define-palette(mat.$red-palette);

$web-theme: mat.define-light-theme((
  color: (
    primary: $web-primary,
    accent: $web-accent,
    warn: $web-warn,
  )
));

// 自定义样式：取主题中primary的默认颜色
a {
  color: mat.color($web-theme, primary);
}

// 也可以取浅色调或指定数值
// a {
//   color: mat.color($web-theme, primary, lighter);
// }

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

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