Angular v19如何通过代码切换Material主题调色板？

针对你在Angular v19中想通过代码切换Material主题区分环境的需求，这里提供两个可行方案：

这个方法通过Angular环境配置结合Sass预编译，打包时自动生成对应环境的主题，无需运行时操作。

1. 给各环境添加主题标识
   在src/environments下的各环境文件中加入主题标记：

• 开发环境（environment.ts）：

export const environment = {
  production: false,
  theme: 'dev'
};

• 生产环境（environment.prod.ts）：

export const environment = {
  production: true,
  theme: 'prod'
};

• 测试环境（environment.test.ts）：

export const environment = {
  production: false,
  theme: 'test'
};

2. 把环境变量传给Sass
   修改angular.json的build配置，在不同环境的stylePreprocessorOptions里定义Sass变量：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他配置...
    "stylePreprocessorOptions": {
      "define": {
        "$ENV_THEME": "'dev'" // 默认用开发环境主题
      }
    }
  },
  "configurations": {
    "production": {
      // 其他生产配置...
      "stylePreprocessorOptions": {
        "define": {
          "$ENV_THEME": "'prod'"
        }
      }
    },
    "test": {
      // 其他测试配置...
      "stylePreprocessorOptions": {
        "define": {
          "$ENV_THEME": "'test'"
        }
      }
    }
  }
}

3. 编写主题切换逻辑
   在styles.scss里根据$ENV_THEME变量选择对应的调色板并生成主题：

@use '@angular/material' as mat;

// 定义各环境的调色板
$dev-primary: mat.define-palette(mat.$teal-palette);
$dev-accent: mat.define-palette(mat.$amber-palette);
$dev-warn: mat.define-palette(mat.$red-palette);

$prod-primary: mat.define-palette(mat.$indigo-palette);
$prod-accent: mat.define-palette(mat.$pink-palette);
$prod-warn: mat.define-palette(mat.$red-palette);

$test-primary: mat.define-palette(mat.$green-palette);
$test-accent: mat.define-palette(mat.$orange-palette);
$test-warn: mat.define-palette(mat.$red-palette);

// 根据环境变量选择主题
@if $ENV_THEME == 'dev' {
  $theme: mat.define-light-theme((
    color: (
      primary: $dev-primary,
      accent: $dev-accent,
      warn: $dev-warn
    )
  ));
} @else if $ENV_THEME == 'test' {
  $theme: mat.define-light-theme((
    color: (
      primary: $test-primary,
      accent: $test-accent,
      warn: $test-warn
    )
  ));
} @else {
  // 默认用生产环境主题
  $theme: mat.define-light-theme((
    color: (
      primary: $prod-primary,
      accent: $prod-accent,
      warn: $prod-warn
    )
  ));
}

// 应用主题到所有Material组件
@include mat.all-component-themes($theme);

4. 打包时指定环境
   运行对应命令即可自动应用对应主题：

# 开发环境打包
ng build

# 生产环境打包
ng build --configuration=production

# 测试环境打包
ng build --configuration=test

如果需要在应用运行时根据环境或用户操作切换主题，可以用CSS变量结合Material主题覆盖：

1. 定义基础主题与CSS变量
   在styles.scss里定义基础主题结构，把调色板的关键颜色替换为CSS变量：

@use '@angular/material' as mat;

// 定义基础调色板结构，后续用CSS变量替换具体颜色
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette);
$warn-palette: mat.define-palette(mat.$red-palette);

// 替换调色板的核心颜色为CSS变量
$primary-palette: map.merge($primary-palette, (
  default: var(--primary-default),
  contrast: (
    default: var(--primary-contrast)
  )
));

$accent-palette: map.merge($accent-palette, (
  default: var(--accent-default),
  contrast: (
    default: var(--accent-contrast)
  )
));

$warn-palette: map.merge($warn-palette, (
  default: var(--warn-default),
  contrast: (
    default: var(--warn-contrast)
  )
));

// 生成并应用主题
$theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette
  )
));

@include mat.all-component-themes($theme);

// 生产环境默认CSS变量
:root {
  --primary-default: #3f51b5;
  --primary-contrast: #ffffff;
  --accent-default: #e91e63;
  --accent-contrast: #ffffff;
  --warn-default: #f44336;
  --warn-contrast: #ffffff;
}

2. 在组件中根据环境切换变量
   在app.component.ts里，根据当前环境动态修改根元素的CSS变量：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    this.setThemeByEnv();
  }

  private setThemeByEnv(): void {
    const rootEl = document.documentElement;
    switch(environment.theme) {
      case 'dev':
        rootEl.style.setProperty('--primary-default', '#009688');
        rootEl.style.setProperty('--primary-contrast', '#ffffff');
        rootEl.style.setProperty('--accent-default', '#ffc107');
        rootEl.style.setProperty('--accent-contrast', '#000000');
        break;
      case 'test':
        rootEl.style.setProperty('--primary-default', '#4caf50');
        rootEl.style.setProperty('--primary-contrast', '#ffffff');
        rootEl.style.setProperty('--accent-default', '#ff9800');
        rootEl.style.setProperty('--accent-contrast', '#000000');
        break;
      default: // 生产环境
        rootEl.style.setProperty('--primary-default', '#3f51b5');
        rootEl.style.setProperty('--primary-contrast', '#ffffff');
        rootEl.style.setProperty('--accent-default', '#e91e63');
        rootEl.style.setProperty('--accent-contrast', '#ffffff');
        break;
    }
  }
}

Angular Material的$overrides主要用于局部覆盖组件样式，如果需要给特定环境的组件加差异化样式（比如开发环境按钮加高亮边框），可以这样用：

@use '@angular/material' as mat;

@if $ENV_THEME == 'dev' {
  @include mat.button-theme-overrides($theme, (
    raised-button: (
      container: (
        border: '2px solid #ffc107'
      )
    )
  ));
}

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