Angular Material 18：如何为明暗主题设置组件背景色？

核心思路 #

你的现有主题已完成基础组件颜色配置，但要单独设置主题对应的背景色，需要扩展主题的颜色配置，并调整全局样式的主题应用逻辑，具体实现如下：

1. 扩展主题的背景色配置 #

在定义$light-theme和$dark-theme时，直接在color配置中添加background字段，指定对应主题的全场景背景色（包括全局背景、卡片、对话框等组件背景）：

@use "@angular/material" as mat;

@include mat.core();

// 浅色主题：背景设为纯黑，同步配置组件背景色
$light-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      // 自定义浅色主题全场景背景色
      background: (
        status-bar: #000000,
        app-bar: #000000,
        background: #000000,
        hover: rgba(255,255,255,0.04),
        card: #000000,
        dialog: #000000,
        disabled-button: rgba(255,255,255,0.12),
        raised-button: #000000,
        focused-button: rgba(255,255,255,0.12),
        selected-button: #000000,
        selected-disabled-button: rgba(255,255,255,0.12),
        disabled-button-toggle: rgba(255,255,255,0.12),
        unselected-chip: rgba(255,255,255,0.12),
        disabled-list-option: rgba(255,255,255,0.12),
      )
    ),
    density: (
      scale: -5,
    ),
  )
);

// 深色主题：背景设为纯白，同步配置组件背景色
$dark-theme: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      // 自定义深色主题全场景背景色
      background: (
        status-bar: #ffffff,
        app-bar: #ffffff,
        background: #ffffff,
        hover: rgba(0,0,0,0.04),
        card: #ffffff,
        dialog: #ffffff,
        disabled-button: rgba(0,0,0,0.12),
        raised-button: #ffffff,
        focused-button: rgba(0,0,0,0.12),
        selected-button: #ffffff,
        selected-disabled-button: rgba(0,0,0,0.12),
        disabled-button-toggle: rgba(0,0,0,0.12),
        unselected-chip: rgba(0,0,0,0.12),
        disabled-list-option: rgba(0,0,0,0.12),
      )
    ),
    density: (
      scale: -5,
    ),
  )
);

2. 调整全局样式的主题应用逻辑 #

原代码中.dark-theme仅应用组件颜色样式，需补充全局背景色的切换逻辑，同时确保组件背景色生效：

// 全局样式应用
html, body {
  height: 100%;
  // 默认浅色主题：应用完整组件主题+全局背景色
  @include mat.all-component-themes($light-theme);
  background-color: mat.get-color-from-palette(mat.get-theme-color($light-theme, background), background);
  
  // 深色主题切换样式
  &.dark-theme {
    // 覆盖组件颜色配置
    @include mat.all-component-colors($dark-theme);
    // 切换全局背景色
    background-color: mat.get-color-from-palette(mat.get-theme-color($dark-theme, background), background);
    
    // 可选：单独调整特定组件的背景色（如果需要更精细的控制）
    .mat-card {
      background-color: mat.get-color-from-palette(mat.get-theme-color($dark-theme, background), card);
    }
  }
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

3. 主题切换的前端逻辑（补充） #

若尚未实现主题切换功能，只需在组件中通过操作DOM类名完成切换：

// 在任意组件中实现主题切换方法
toggleTheme() {
  document.body.classList.toggle('dark-theme');
}

关键说明 #

• 使用mat.get-theme-color和mat.get-color-from-palette可以从主题对象中动态获取配置色，避免硬编码
• 扩展background字段时需覆盖所有场景，确保卡片、对话框等组件的背景色也跟随主题切换
• 全局背景色需单独设置，因为mat.all-component-themes不会自动为body元素设置背景色

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