Angular Material 19明暗主题样式覆盖在旧浏览器失效问题

核心问题定位 #

你的问题本质是深色主题下Material组件自定义样式优先级不足，同时叠加了IOS Safari 16.2对CSS color-scheme和变量的兼容性bug。以下是针对性修复方案：

方案1：修正Material样式覆盖的优先级与嵌套逻辑 #

默认的mat.xxx-overrides在深色主题下可能被Material内置样式覆盖，需要明确绑定主题类的上下文：

1. 在主题scss文件中，将深色主题的样式覆盖嵌套在body.dark选择器内：

// 基础浅色主题
@include mat.core();
$light-theme: mat.define-light-theme((
  color: (
    primary: $mat-blue,
    accent: $mat-pink,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));
@include mat.all-component-themes($light-theme);

// 深色主题（嵌套body.dark确保优先级）
body.dark {
  $dark-theme: mat.define-dark-theme((
    color: (
      primary: $mat-blue,
      accent: $mat-pink,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  ));
  
  // 深色主题下的按钮样式覆盖
  @include mat.button-theme($dark-theme);
  @include mat.button-overrides($dark-theme, (
    contained: (
      background-color: #2d2d2d,
      color: #fff,
    )
  ));
  
  // 深色主题下的卡片样式覆盖
  @include mat.card-theme($dark-theme);
  @include mat.card-overrides($dark-theme, (
    container: (
      background-color: #1e1e1e,
    )
  ));
  
  // 其他组件的overrides同理，全部嵌套在body.dark内
}

2. 避免全局重复引入@include mat.all-component-themes，深色主题只引入需要自定义的组件主题和overrides。

方案2：修复IOS Safari 16.2兼容性问题 #

IOS Safari 16.2对color-scheme和CSS变量的支持存在bug，需做以下兼容：

• 移除主题配置中的theme-type属性，改用CSS变量手动控制颜色
• 为旧版Safari添加降级样式：

// 全局样式中添加Safari兼容逻辑
@supports not (color-scheme: dark light) {
  body.dark {
    // 手动重置基础样式，避免Safari自动反转颜色
    background-color: #000;
    color: #fff;
    // 为Material组件添加强制降级样式
    .mat-card {
      background-color: #1e1e1e !important;
    }
    .mat-button-contained {
      background-color: #2d2d2d !important;
      color: #fff !important;
    }
  }
}

// 禁止Safari自动颜色反转
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    color-scheme: dark only;
  }
}
@media (prefers-color-scheme: light) {
  body:not(.dark) {
    color-scheme: light only;
  }
}

方案3：确保主题切换的DOM操作时机正确 #

修改ThemeService，用Angular的Renderer2操作DOM，避免直接修改classList导致的样式未及时更新：

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private renderer: Renderer2;
  private bodyElement: HTMLElement;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
    this.bodyElement = document.body;
    // 初始化主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    this.setTheme(savedTheme);
  }

  setTheme(theme: 'light' | 'dark') {
    // 先移除旧主题类，再添加新类
    this.renderer.removeClass(this.bodyElement, 'light');
    this.renderer.removeClass(this.bodyElement, 'dark');
    this.renderer.addClass(this.bodyElement, theme);
    localStorage.setItem('theme', theme);
  }

  toggleTheme() {
    const currentTheme = this.bodyElement.classList.contains('dark') ? 'light' : 'dark';
    this.setTheme(currentTheme);
  }
}

验证步骤 #

1. 移除所有之前的color-scheme相关配置和无效的:root包裹
2. 按照方案1重构主题scss文件
3. 添加方案2的Safari兼容样式
4. 替换方案3的ThemeService实现
5. 测试IOS Safari 16.2和其他现代浏览器的明暗切换效果

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