Angular 5 Material自定义组件动态切换主题问题咨询

嘿，我帮你梳理下怎么搞定自定义组件的动态主题切换问题——你之前的核心问题应该是自定义组件的样式没和Material的主题系统绑定，所以默认组件能切换，但自己写的组件没反应。

先从重构主题文件开始，这是动态切换的基础：

1. 重新定义theme.scss，导出CSS变量 #

你之前的theme.scss没写完，我给你补全成支持动态切换的版本，核心是把主题色导出成全局CSS变量，这样自定义组件也能引用：

@import '~@angular/material/theming';

// 定义第一个主题：Indigo Pink（和你之前用的预构建主题一致）
$indigo-pink-primary: mat-palette($mat-indigo);
$indigo-pink-accent: mat-palette($mat-pink, A200, A100, A400);
$indigo-pink-warn: mat-palette($mat-red);
$indigo-pink-theme: mat-light-theme((
  color: (
    primary: $indigo-pink-primary,
    accent: $indigo-pink-accent,
    warn: $indigo-pink-warn,
  )
));

// 定义第二个主题：Deep Purple Amber（作为切换的备选）
$deep-purple-amber-primary: mat-palette($mat-deep-purple);
$deep-purple-amber-accent: mat-palette($mat-amber, A200, A100, A400);
$deep-purple-amber-warn: mat-palette($mat-red);
$deep-purple-amber-theme: mat-dark-theme((
  color: (
    primary: $deep-purple-amber-primary,
    accent: $deep-purple-amber-accent,
    warn: $deep-purple-amber-warn,
  )
));

// 核心混合器：把主题色转成CSS变量，同时让Material组件应用主题
@mixin custom-theme($theme) {
  $color-config: mat-get-color-config($theme);
  $primary: map-get($color-config, primary);
  $accent: map-get($color-config, accent);
  $is-dark: map-get($color-config, is-dark);

  // 导出全局CSS变量，自定义组件就靠这些变量变色
  :root {
    --primary-color: mat-color($primary);
    --accent-color: mat-color($accent);
    --background-color: if($is-dark, #121212, #ffffff);
    --text-primary-color: if($is-dark, #fff, #333);
  }

  // 让Material默认组件应用主题（这一步保证默认组件正常切换）
  @include angular-material-theme($theme);
}

// 生成对应主题的类，切换主题就是给body加/减这些类
.theme-indigo-pink {
  @include custom-theme($indigo-pink-theme);
}

.theme-deep-purple-amber {
  @include custom-theme($deep-purple-amber-theme);
}

2. 修改styles.scss，关联主题变量 #

你之前的styles.scss直接引入了预构建主题，现在改成引入我们的自定义主题，同时把自定义组件的固定颜色换成CSS变量：

// styles.scss
@import './theme.scss';

// 默认加载Indigo Pink主题
body {
  @include custom-theme($indigo-pink-theme);
}

// 你的自定义组件样式，把固定颜色换成主题变量
.widget-para-title {
  font-size: small;
  margin-top:10px;
  // 原来的固定#4A90E2换成--primary-color，跟着主题变
  color: var(--primary-color);
  font-weight:bold;
  margin-bottom:0px;
  padding: 5px;
  font-family: Roboto,"Helvetica Neue",sans-serif;
}

3. 写主题切换的逻辑（TS代码） #

在根组件（比如app.component.ts）里加个切换方法，本质就是给body切换主题类：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  currentTheme = 'theme-indigo-pink';

  switchTheme(themeName: string) {
    // 移除当前主题类，添加新的
    document.body.classList.remove(this.currentTheme);
    document.body.classList.add(themeName);
    this.currentTheme = themeName;
    // 把选中的主题存在localStorage，刷新页面也能记住
    localStorage.setItem('selected-theme', themeName);
  }

  ngOnInit() {
    // 初始化时读取保存的主题
    const savedTheme = localStorage.getItem('selected-theme');
    if (savedTheme) {
      this.switchTheme(savedTheme);
    }
  }
}

4. 模板里加切换按钮 #

在根组件的HTML里加两个按钮，用来触发切换：

<button (click)="switchTheme('theme-indigo-pink')">Indigo Pink 主题</button>
<button (click)="switchTheme('theme-deep-purple-amber')">Deep Purple Amber 主题</button>

为什么之前自定义组件不生效？ #

你之前的自定义组件用了固定颜色值#4A90E2，完全和Material的主题系统脱节了。动态切换主题时，Material默认组件会自动读取主题生成的样式，但自定义组件必须手动引用我们导出的CSS变量，才能跟着主题一起变化。

现在按这个流程改完，自定义组件的颜色就会和主题同步切换了～

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