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

Question

This question 关于在 Angular Material 中设置背景颜色已于 2017 年发布，答案已过时。最新版本的 Angular Material (12.0.4) 似乎对 scss mixins 进行了很多更改。

在更新到当前版本之前，我能够从之前链接的问题中实现this answer，如下所示：

// 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: (...)

（在 Angular 材质的 Github repo 中可以找到）。

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

像往常一样，Angular Material page 上的文档缺少这方面的任何信息。

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

Answer 1

我遇到了同样的问题并制定了解决方案。我在 cmets 中解释。

@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
);