Angular Material自定义浅色主题indigo 900主色不生效如何解决

配置的indigo 900主色不生效、始终显示默认indigo色，按以下优先级排查：

• 移除angular.json中重复引入的预构建主题
  打开根目录angular.json，找到路径projects > [你的项目名] > architect > build > options > styles对应的数组，删除所有类似@angular/material/prebuilt-themes/indigo-pink.css的预构建主题引入项。预构建主题样式优先级高于style.scss里的自定义主题，会直接覆盖调色板配置，这是90%同类问题的诱因。
• 匹配当前Angular Material版本的主题API
  不同大版本的Material主题API差异极大，写法不兼容会直接导致配置失效：
  • 14及更早版本：define-light-theme不支持嵌套配置对象的传参方式，把主题定义代码改成直接传调色板变量：

    $app-light-theme: mat.define-light-theme($app-light-primary, $app-light-accent);
    

  • 15及以上版本：默认启用M3主题体系，和你写的M2调色板逻辑不兼容，需要在引入@angular/material时显式关闭M3：

    @use '@angular/material' as mat with (
      $use-m3-theme: false
    );
    // 后续原有的core()调用、调色板定义、主题定义逻辑保持不变
    @include mat.core();
    

• 排查局部样式覆盖
  检查项目中各组件的scss文件，确认没有重复调用@include mat.all-component-themes()，也没有单独引入某个Material组件的theme混入。局部混入的优先级高于全局主题配置，会把主色重置为默认值。如果项目里用了Tailwind这类全局CSS框架，也顺带检查下有没有全局样式覆盖了Material组件的颜色属性。
• 有效性验证
  改完以上配置后，可以在style.scss里加一段测试样式确认调色板是否正常：

  .test-theme-primary {
    background: mat.get-color-from-palette($app-light-primary, default);
  }
  

  把这个类加到页面任意元素上，如果元素背景色为indigo 900，说明调色板配置已经生效，剩下的个别组件颜色异常只需要针对性排查局部样式覆盖即可。

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