Angular Material 12版本如何自定义背景与前景主题配色

Angular Material 12.0.4+ 自定义背景/前景调色板方案 #

从Angular Material 12版本开始，不再支持直接覆写全局SCSS变量来修改背景、前景配置，你需要在构建主题对象的时候手动传入自定义的背景、前景调色板，具体操作流程如下：

1. 首先定义自定义的背景、前景调色板，配置规则和你之前的写法一致，对应调整参数即可：

// 自定义浅色主题背景调色板
$custom-light-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: rgba(black, 0.06),
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// 自定义浅色主题前景调色板
$custom-light-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-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

// 深色主题的背景、前景调色板同理按照你的需求自定义即可
$custom-dark-background: (
  // 你的自定义深色背景配置
);
$custom-dark-foreground: (
  // 你的自定义深色前景配置
);

2. 构建主题对象时，使用mat.define-light-theme/mat.define-dark-theme方法，手动传入自定义的背景、前景调色板：

// 先定义基础的主色、辅助色、警告色调色板
$app-primary: mat.define-palette($mat-indigo);
$app-accent: mat.define-palette($mat-pink, A200, A100, A400);
$app-warn: mat.define-palette($mat-red);

// 构建自定义主题，在color配置项中传入你自定义的背景、前景配置
$app-light-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn,
    background: $custom-light-background,
    foreground: $custom-light-foreground
  )
));

3. 最后正常引入组件主题即可：

@include mat.all-component-themes($app-light-theme);

如果仅需要修改全局背景色不需要调整其他调色板配置，也可以直接在全局样式中给body或根组件添加背景色，同时给Angular Material的根容器添加mat-app-background类即可生效。

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