如何修改Angular Material明暗主题背景色？能否通过SASS主题映射实现？

这种思路完全可行，而且是Angular Material主题定制的标准方案之一，具体说明如下：

• 核心逻辑正确性：你给出的代码逻辑没问题——Angular Material的主题本质是SASS映射，通过mat.get取出background子映射，再用map.merge更新其中的app-background属性，最后合并回原主题，这符合官方主题定制的规范。补充SASS语法分号后的完整代码如下：

  $background: mat.get($theme, background);
  $background: map.merge($background, (app-background: orange)); // 修改背景色为橙色
  $theme: mat.merge($theme, (background: $background)); // 将更新后的背景映射合并回主题
  

• app-background的作用：它是Angular Material背景映射中的标准属性，负责控制应用的整体背景色，无论是亮色还是暗色主题，都可以通过修改这个属性来统一调整背景。

• 区分亮/暗色主题的定制：如果需要为亮色和暗色主题设置不同的背景色，可以分别定义两个主题并单独修改：

  @use '@angular/material' as mat;
  
  // 定义并修改亮色主题
  $light-theme: mat.define-light-theme((
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    )
  ));
  $light-bg: mat.get($light-theme, background);
  $light-bg: map.merge($light-bg, (app-background: #f5f5f5));
  $light-theme: mat.merge($light-theme, (background: $light-bg));
  
  // 定义并修改暗色主题
  $dark-theme: mat.define-dark-theme((
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    )
  ));
  $dark-bg: mat.get($dark-theme, background);
  $dark-bg: map.merge($dark-bg, (app-background: #121212));
  $dark-theme: mat.merge($dark-theme, (background: $dark-bg));
  

• 样式生效的关键：修改主题后，需要在全局样式文件中注入主题样式，确保背景色生效：

  // 全局styles.scss
  @use '@angular/material' as mat;
  
  @include mat.all-component-themes($light-theme);
  // 如果支持暗色主题切换，可结合类名注入暗色主题
  .dark-theme {
    @include mat.all-component-themes($dark-theme);
  }
  

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