Angular应用单页面切换Material主题失败，求可行实现方案

当然可行！不过你当前的实现方式有问题，导致深色主题没生效——这是因为Angular组件的样式默认是封装隔离的，直接在home.component.scss里引入主题，样式只会作用于该组件内部的DOM元素，而Material组件的核心样式是全局级别的，再加上全局已经加载了浅色主题，优先级更高，所以你看不到深色主题的效果。

下面是具体的正确实现步骤：

1. 全局定义两套主题并封装备用主题 #

修改你的main.scss，把深色主题包裹在一个自定义CSS类（比如.dark-theme）中，只默认启用浅色主题：

@import '~@angular/material/theming'; 
@include mat-core(); 

// 定义主题色板
$myapp-primary: mat-palette($mat-light-green, 50); 
$myapp-accent: mat-palette($mat-light-green); 

// 两套主题变量
$myapp-light-theme: mat-light-theme($myapp-primary, $myapp-accent); 
$myapp-dark-theme: mat-dark-theme($myapp-primary, $myapp-accent); 

// 默认全局应用浅色主题
@include angular-material-theme($myapp-light-theme);

// 将深色主题封装在自定义类中，仅当类存在时生效
.dark-theme {
  @include angular-material-theme($myapp-dark-theme);
}

2. 在目标组件中动态切换主题类 #

修改home.component.ts，利用组件的生命周期钩子，进入页面时给根元素（比如body）添加.dark-theme类，离开页面时移除，实现主题的自动切换和恢复：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    // 进入页面时，给body添加深色主题类
    document.body.classList.add('dark-theme');
  }

  ngOnDestroy(): void {
    // 离开页面时，移除深色主题类，恢复全局浅色主题
    document.body.classList.remove('dark-theme');
  }
}

额外优化（可选） #

如果希望主题切换更流畅，可以在全局样式中添加过渡动画，比如：

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

这样就能完美实现「全局浅色主题，仅Home页面使用深色主题」的需求了。

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