如何在Angular Material自定义主题中设置背景调色板？

问题原因 #

Angular Material 提供的 mat.define-light-theme、mat.define-dark-theme 方法内部会基于传入的 primary、accent、warn 调色板自动生成背景、前景配色，直接在 color 配置中传入 background 字段会被忽略，这是框架的内置逻辑。

最小改动解决方案 #

你不需要调整原有主题定义的核心结构，只需要在生成基础主题后手动覆盖背景配置即可，总共只需新增3~5行代码：

1. 首先在样式文件顶部引入 Sass 映射工具（如果还没引入的话）：

@use 'sass:map';

2. 保留你原有生成基础主题的代码，之后新增映射合并逻辑，替换背景调色板：

// 你的原有主题定义代码，无需修改
$my-material-theme: mat.define-light-theme((
    color: (
      primary: $my-material-primary,
      accent: $my-material-accent,
      warn: $my-material-warn,
    ),
    typography: $my-material-font
));

// 新增：替换自定义背景调色板
$my-material-theme: map.merge($my-material-theme, (
  color: map.merge(map.get($my-material-theme, color), (
    background: $my-material-background
  ))
));

// 你的原有全局主题注入代码，无需修改
@include mat.all-component-themes($my-material-theme);

注意事项 #

你自定义的 $my-material-background 调色板需要符合 Angular Material 的格式要求，包含 status-bar、app-bar、background（页面背景）、card（卡片背景）、dialog 等全量背景字段，如果只需要修改部分背景色，可以基于默认生成的背景调色板覆盖调整，避免缺项：

// 先获取默认生成的背景调色板
$default-bg: map.get(map.get($my-material-theme, color), background);
// 只覆盖你需要修改的字段，其余保留默认值
$my-material-background: map.merge($default-bg, (
  background: #f8f9fa, // 自定义页面背景
  card: #ffffff // 自定义卡片背景
));

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