Angular Material 14升级到15后主题失效问题求助

Angular Material 15的Sass主题系统在编译阶段会对颜色值做严格校验与处理，而你使用的CSS变量属于运行时变量——编译时Sass无法解析出它对应的实际颜色值，因此会判定rgb(var(--primary-color))不是有效颜色，触发报错。直接用十六进制/RGB代码时，编译阶段就能拿到具体颜色值，所以可以正常工作。

方案一：用Sass变量替代CSS变量（无需动态切换主题） #

如果不需要动态修改主题，将CSS变量替换为Sass变量，让编译阶段能获取实际颜色值：

1. 修改_variables.scss：

// Primary Color
$primary-color: 39 84 186;
$primary-lighter-color: 190 204 234;
$primary-darker-color: 23 58 163;

// Accent Color
$accent-color: 255 200 69;
$accent-lighter-color: 255 239 199;
$accent-darker-color: 255 180 46;

// Warn Color
$warn-color: 248 90 64;
$warn-lighter-color: 253 206 198;
$warn-darker-color: 245 63 42;

2. 修改styles.scss：

@use '@angular/material' as mat;
@use './styles/variables' as vars;

@include mat.core();

$my-primary: mat.define-palette((
  100: rgb($vars.$primary-lighter-color),
  500: rgb($vars.$primary-color),
  700: rgb($vars.$primary-darker-color),
  contrast: (
    100: #fff,
    500: #fff,
    700: #000,
  )
));
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

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

方案二：使用动态主题（保留CSS变量，支持动态切换） #

如果需要动态修改主题，改用Angular Material的动态主题方案，绕开编译阶段的颜色校验：

1. 简化styles.scss：

@use '@angular/material' as mat;

// 仅保留核心样式，移除静态主题定义
@include mat.core();

2. 在根组件中初始化动态主题：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 初始化根元素CSS变量（可放到单独样式文件）
    this.setRootCssVars();
    // 应用主题到所有组件（包括overlay弹窗）
    this.applyDynamicTheme();
  }

  private setRootCssVars(): void {
    const root = document.documentElement;
    root.style.setProperty('--primary-color', '39 84 186');
    root.style.setProperty('--primary-lighter-color', '190 204 234');
    root.style.setProperty('--primary-darker-color', '23 58 163');
    root.style.setProperty('--accent-color', '255 200 69');
    root.style.setProperty('--accent-lighter-color', '255 239 199');
    root.style.setProperty('--accent-darker-color', '255 180 46');
    root.style.setProperty('--warn-color', '248 90 64');
    root.style.setProperty('--warn-lighter-color', '253 206 198');
    root.style.setProperty('--warn-darker-color', '245 63 42');
  }

  private applyDynamicTheme(): void {
    const root = document.documentElement;
    const overlayEl = overlayContainer.getContainerElement();
    
    // 应用主题色到Material的全局CSS变量
    const themeVars = [
      ['--mdc-theme-primary', 'rgb(var(--primary-color))'],
      ['--mdc-theme-secondary', 'rgb(var(--accent-color))'],
      ['--mdc-theme-error', 'rgb(var(--warn-color))']
    ];

    themeVars.forEach(([varName, value]) => {
      root.style.setProperty(varName, value);
      overlayEl.style.setProperty(varName, value);
    });
  }
}

3. 组件样式中直接使用CSS变量：

.custom-button {
  background-color: rgb(var(--primary-color));
  color: #fff;
}

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