Angular Material v15 暗黑主题部分模块生效异常求助

1. 修复主题文件配置 #

修改theme.scss，统一使用完整的主题混合宏，并显式配置全局背景与文本颜色：

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

@import 'bluegrey-palette';

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

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

// 全局应用亮色主题
@include mat.all-component-themes($light-theme);

// 亮色主题下的全局背景样式
.mat-app-background {
  background-color: mat.get-color-from-palette($primary, 50);
  color: mat.get-color-from-palette($primary, 900);
}

// 暗黑主题样式集合
.darkMode {
  @include mat.all-component-themes($dark-theme);
  
  // 暗黑主题下的全局背景与文本
  .mat-app-background {
    background-color: mat.get-color-from-palette($primary, 900);
    color: mat.get-color-from-palette($primary, 50);
  }
}

2. 正确应用暗黑主题类 #

将.darkMode添加到body标签层级，确保覆盖所有子组件：

<body class="mat-app-background darkMode">
  <app-root></app-root>
</body>

（动态切换主题时，只需给body添加/移除darkMode类即可）

3. 排查组件样式隔离 #

若部分组件仍不生效，检查组件的样式封装设置：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
  // 保持默认的ViewEncapsulation.Emulated，确保主题样式能正常渗透
})
export class YourComponent {}

问题根源说明 #

• 原配置仅引入了部分组件的样式混合宏，mat.all-component-themes会一次性加载所有Material组件的主题样式，避免遗漏。
• mat-app-background的默认颜色依赖主题核心配置，需在.darkMode类下重新定义才能继承暗黑主题的配色。
• 暗黑主题类必须作用在足够高的DOM层级（如body），才能覆盖全局所有区域的样式。

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