Angular Material 更改应用程序背景和前景主题

这个问题 https://stackoverflow.com/questions/43919927/关于在 Angular Material 中设置背景颜色的问题于 2017 年发布，答案已过时。最新版本的 Angular Material (12.0.4) 似乎对 scss mixin 进行了很大的改变。

在更新到当前版本之前，我能够实现这个答案 https://stackoverflow.com/a/45028242/来自先前链接的问题，如下所示：

// Background palette for light themes.
$mat-light-theme-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), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// Background palette for dark themes.
$mat-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($mat-grey, 900),
  background: #303030,
  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
  card:       map_get($mat-grey, 800),
  dialog:     map_get($mat-grey, 800),
  disabled-button: $white-12-opacity,
  raised-button: map-get($mat-grey, 800),
  focused-button: $white-6-opacity,
  selected-button: map_get($mat-grey, 900),
  selected-disabled-button: map_get($mat-grey, 800),
  disabled-button-toggle: map_get($mat-grey, 1000),
);

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:              black,
  divider:           $black-12-opacity,
  dividers:          $black-12-opacity,
  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),
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:              white,
  divider:           $white-12-opacity,
  dividers:          $white-12-opacity,
  disabled:          rgba(white, 0.3),
  disabled-button:   rgba(white, 0.3),
  disabled-text:     rgba(white, 0.3),
  hint-text:         rgba(white, 0.3),
  secondary-text:    rgba(white, 0.7),
  icon:              white,
  icons:             white,
  text:              white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

此代码需要在调用之前放置mat-light-theme($app-primary, $app-accent, $app-warn).

变量名称似乎已更改为：

$light-theme-background-palette: (...)
$dark-theme-background-palette: (...)
$light-theme-foreground-palette: (...)
$dark-theme-foreground-palette: (...)

（这可以在Github 仓库 https://github.com/angular/components/blob/master/src/material/core/theming/_palette.scss对于角度材料）。

我尝试在调用之前设置这些变量@include mat.all-component-themes($app-theme);，但这似乎并没有改变任何应用程序的背景颜色。

与往常一样，有关的文档角度材质页面 https://material.angular.io/guide/theming缺乏这方面的任何信息。

任何有关如何设置背景和前景变量的建议将不胜感激。

我遇到了同样的问题并找到了解决方案。我在评论里解释一下。

@use 'sass:map';
@use '~@angular/material' as mat;
@include mat.core();

// My version of the dark and light background and foreground palettes
// I copied the ones in the _palette.scss file (the Github repo link you posted) 
// and tweaked the values to my liking.
@use './my-styles' as my;

$my-theme-primary: mat.define-palette(mat.$grey-palette, 900);
$my-theme-accent: mat.define-palette(mat.$orange-palette, 500);
$my-theme-warn: mat.define-palette(mat.$red-palette, 800);

// This function ALWAYS sets the background and foreground using _palette.scss
// It will write over any background and foreground you set before it.
$my-theme: mat.define-dark-theme(
  (
    color: (
      primary: $my-theme-primary,
      accent: $my-theme-accent,
      warn: $my-theme-warn,
    ),
  )
);

// If we look at the result of this debug, we can see the map it created.
// And the structure to copy when setting our background and foreground :)
// Note: the properties are repeated. First inside the color property and then after it. 
// Weird, though there might be a reason. I tested and for now I think 
// only the ones under color are the necessary ones.  
@debug $my-theme;

// Write over background and foreground with my versions. 
$my-theme: map.set(
  $my-theme,
  color,
  background,
  my.$dark-background
);

$my-theme: map.set(
  $my-theme,
  color,
  foreground,
  my.$dark-foreground
);

// Change the repeated ones after color just in case
$my-theme: map.set(
  $my-theme,
  background,
  my.$dark-background
);

$my-theme: map.set(
  $my-theme,
  foreground,
  my.$dark-foreground
);

// use my theme everywhere
@include mat.all-component-colors($my-theme);

您始终可以从头开始创建自己的主题，而无需使用 Define-dark-theme / Define-light-theme 函数。这些函数添加前景、背景和暗图。所以你可以只添加它们而不使用该功能。只需确保它具有与这些函数返回的结构相同的结构即可。

您还可以更改单个属性，如前面的解决方案所示。我正在使用map.set()，因为我喜欢它。

$my-theme: map.set(
  $my-theme,
  color,
  background,
  background, 
  pink
);