Angular Material 17自定义背景颜色设置方法求助

问题原因 #

你当前的错误在于：mat.get-theme-color 函数会从主题对象的 color.background 路径读取值，但你通过 map.merge 把自定义背景配置放到了主题的根节点（$dark-theme.background），而非 color 子节点下，所以函数只能读取到默认的深色背景值 #303030。

正确解决方案 #

方案1：定义主题时直接传入background配置

修改 mat.define-dark-theme 的参数，把 $custom-background 直接嵌套在 color 节点下：

@use '@angular/material' as mat;
@use "sass:map";

@include mat.core();

// 你的调色板定义...
$primary-palette: (
  900: #0020c6,
  contrast: (
    // ...
  )
);
$secondary-palette: (
  // ...
  contrast: (
    // ...
  )
);
$warn-palette: (
  // ...
  contrast: (
    // ...
  )
);

$custom-background: (
  status-bar: red,
  app-bar: red,
  background: red,
  hover: red,
  card: red,
  dialog: red,
  raised-button: red,
  selected-button: red,
  selected-disabled-button: red,
  disabled-button: red,
  focused-button: red,
  disabled-button-toggle: red,
  unselected-chip: red,
  disabled-list-option: red,
  tooltip: red,
);

// 直接在define-dark-theme的color节点中加入background配置
$dark-theme: mat.define-dark-theme((
 color: (
   primary: mat.define-palette($primary-palette, 500),
   accent: mat.define-palette($secondary-palette, 500),
   warn: mat.define-palette($warn-palette),
   background: $custom-background // 把自定义背景放在这里
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@include mat.core-theme($dark-theme);
@include mat.button-theme($dark-theme);
@include mat.checkbox-theme($dark-theme);

// 调试验证
@debug mat.get-theme-color($dark-theme, background, background); // 现在会输出red
@debug mat.get-theme-color($dark-theme, primary, 900); // 依然输出#0020c6

.mat-app-background {
  background-color: mat.get-theme-color($dark-theme, background, background); // 正确应用red
}

方案2：如果需要后续合并背景配置

如果你需要在定义主题后再修改背景，要确保merge到color.background路径，而不是根节点：

// 原主题定义（不含background）
$dark-theme: mat.define-dark-theme((
 color: (
   primary: mat.define-palette($primary-palette, 500),
   accent: mat.define-palette($secondary-palette, 500),
   warn: mat.define-palette($warn-palette),
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

// 合并到color节点下的background
$dark-theme: map.merge($dark-theme, (
  color: map.merge(map.get($dark-theme, color), (
    background: $custom-background
  ))
));

验证逻辑 #

mat.get-theme-color($theme, category, key) 的查找逻辑是：

1. 从 $theme 中取出 color 节点
2. 从 color 中取出 category（比如background、primary）
3. 从 category 中取出对应的 key 值

之前你的自定义背景不在color节点内，所以函数无法读取，只能返回默认的主题背景值。

内容的提问来源于stack exchange，提问作者Gonçalo Figueiredo