Angular 12 Material自定义主题default-contrast色值无法生效问题

1. 统一Sass导入语法，避免新旧混用 #

你现在同时用@import的旧版Material主题语法和带命名空间的新版@use语法，才会出现mat、map命名空间找不到的报错。Angular 12配套的Angular Material版本仍兼容旧版@import语法，直接用旧API即可，不需要加mat.前缀，也不需要额外引入map模块：

// 全局主题文件头部保留原导入即可，不需要新增@use语句
@import '~@angular/material/theming';
@include mat-core();

如果确实要使用新版@use语法，必须在文件顶部显式声明所有依赖的模块，且@use语句必须放在SCSS文件最顶部，不能出现在@import语句之后：

@use 'sass:map';
@use '@angular/material' as mat;

旧版@import语法下操作map直接用map-get()函数即可，不需要map.get()的命名空间写法。

2. 处理变量作用域问题 #

你在自定义主题@mixin内部定义的变量仅在该mixin的作用域内生效，外部直接调用自然会报变量未定义。如果需要全局使用对比度色值，直接把变量定义在mixin外部即可：

// 你的自定义调色板定义后，直接在全局定义变量
$darkblue: mat-color($dark-blue, 500);
$darkblue-contrast: mat-color($dark-blue, default-contrast);

// 之后再定义你的主题mixin
@mixin my-custom-theme($theme) {
  // 原有主题相关逻辑保留
  // 这里面也可以直接用上面定义的$darkblue、$darkblue-contrast变量
  .background {
    &.primary {
      background-color: $darkblue;
      color: $darkblue-contrast;
    }
  }
}

3. 确保自定义主题mixin被正确调用 #

定义完自定义mixin后必须在全局样式中显式调用，否则mixin内的样式不会被编译生成。你需要在全局styles.scss（或你的主题入口文件）中，生成完主题后调用自定义mixin：

// 生成标准Material主题
$my-theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($my-theme);
// 必须添加这一行，调用你的自定义mixin，内部的样式才会被编译
@include my-custom-theme($my-theme);

4. 对比度色值获取验证 #

你当前的调色板contrast字段定义完全符合要求，用官方推荐的mat-color($dark-blue, default-contrast)写法就能正确取出对应色值，不需要其他额外处理。如果还是不生效，可以在变量定义后加编译时打印验证：

@debug $darkblue-contrast; // 编译时会输出对应的色值，确认是否正确获取

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