Angular Material 12 组件自定义主题foreground/background配置不生效排查

先明确background与foreground的区别 #

• background调色板对应所有组件的背景类属性，比如卡片底色、按钮禁用态背景、工具栏底色等
• foreground调色板对应所有组件的文字/图标类前景属性，比如禁用文字透明度、提示文字颜色、边框颜色等

问题根源 #

你自定义的$light-theme-background-palette不生效，是因为Angular Material 12的主题配置采用显式传参优先级高于全局变量的规则，你在调用mat.define-light-theme时仅传入了primary/accent/warn三个参数，函数会默认读取内置的background、foreground调色板，根本不会识别你单独定义的全局调色板变量。 #

正确配置方式 #

直接将自定义的background、foreground调色板显式传入主题配置即可生效，无需额外写原生CSS覆盖：

// 先引入依赖
@use '~@angular/material' as mat;
@use 'sass:map';

// 原有自定义主色、辅助色、警告色调色板
$my-custom-primary: mat.define-palette(alive.$my-custom-palette-primary, 900);
$my-custom-accent: mat.define-palette(alive.$my-custom-palette-secondary, 900, A100, A400);
$my-custom-warn: mat.define-palette(mat.$red-palette);

// 自定义background调色板，仅修改你需要的字段即可，其余保留默认结构
$my-custom-background: (
  status-bar: map.get(mat.$grey-palette, 300),
  app-bar:    map.get(mat.$grey-palette, 100),
  background: map.get(mat.$grey-palette, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12), // 禁用按钮背景色在此处修改
  raised-button: white,
  focused-button: mat.$dark-focused,
  selected-button: map.get(mat.$grey-palette, 300),
  selected-disabled-button: map.get(mat.$grey-palette, 400),
  disabled-button-toggle: map.get(mat.$grey-palette, 200),
  unselected-chip: map.get(mat.$grey-palette, 300),
  disabled-list-option: map.get(mat.$grey-palette, 200),
  tooltip: map.get(mat.$grey-palette, 700),
);

// 如有修改前景色的需求，可以自定义foreground调色板，不需要可省略
$my-custom-foreground: (
  base:              black,
  divider:           rgba(black, 0.12),
  dividers:          rgba(black, 0.12),
  disabled:          rgba(black, 0.38),
  disabled-button:   rgba(black, 0.38), // 禁用按钮文字颜色在此处修改
  disabled-text:     rgba(black, 0.38),
  hint-text:         rgba(black, 0.38),
  secondary-text:    rgba(black, 0.54),
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

// 生成主题时显式传入自定义的background、foreground
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-custom-primary,
    accent: $my-custom-accent,
    warn: $my-custom-warn,
    background: $my-custom-background,
    foreground: $my-custom-foreground
  )
));

// 应用主题到所有组件，若使用模块化引入则调用对应组件的主题mixin即可
@include mat.all-component-themes($my-theme);

注意事项 #

• 自定义调色板必须完整包含所有必填字段，如果缺字段会导致编译报错，可直接复制内置默认调色板的结构，仅修改需要调整的字段即可
• 确保主题文件在全局样式中引入，优先级高于其他组件样式，避免被覆盖
• 如果仅按需引入了部分组件的主题mixin，要确保目标组件（比如button）的主题mixin已被调用，否则配置不会生效

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