使用Angular Material 3及Experimental自定义主题仍遇核心主题未找到警告

问题原因 #

控制台弹出的警告是因为Angular Material无法检测到当前页面有生效的Material主题样式。你的代码中虽然定义了深色和浅色主题，但如果页面根元素没有默认应用其中一个主题类，Material初始化时就会触发该警告。

修复步骤 #

1. 修正代码中的笔误 #

你的$m3-light-theme定义里，primary属性引用了错误的变量名，把matx.m3-$green-palette改为matx.$m3-green-palette：

$m3-light-theme: matx.define-theme((
  color: (
    primary: matx.$m3-green-palette,
    tertiary: matx.$m3-blue-palette,
  )
));

2. 确保根元素默认应用主题类 #

Angular Material需要页面加载时就有一个主题类生效，你可以通过以下两种方式实现：

方式一：直接在index.html中设置

打开src/index.html，给<body>标签添加默认主题类：

<body class="light-theme">
  <app-root></app-root>
</body>

如果默认需要深色主题，就改为class="dark-theme"。

方式二：在根组件中动态设置

如果需要根据逻辑切换默认主题（比如读取本地存储），可以在app.component.ts中添加代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 示例：默认应用浅色主题，可根据需求修改
    document.body.classList.add('light-theme');
  }
}

3. 验证主题文件的引入 #

确认你的styles.scss已经被正确配置到angular.json的styles数组中：

"styles": [
  "src/styles.scss"
]

完成以上步骤后，控制台的"Could not find Angular Material core theme"警告应该会消失，Material组件也能正常工作。

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