这个关于在Angular Material中设置背景颜色的问题发布于2017年，答案已经过时。最新版本的Angular Material(12.0.4(似乎对scs的mixin有很大的改变。
在更新到当前版本之前，我能够从以前链接的问题中实现这个答案，如下所示：
// 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 Material的Github repo中找到(。
在调用@include mat.all-component-themes($app-theme);之前，我尝试设置这些变量，但这似乎不会改变任何应用程序的背景颜色。
和往常一样，Angular Material页面上的文档缺少任何关于这方面的信息。
任何关于如何设置背景和前景变量的建议都将不胜感激。
我遇到了同样的问题，并找到了解决方案。我在评论中解释。
@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主题/define light主题功能。这些功能添加了前景、背景和暗贴图。所以你可以在没有函数的情况下添加它们。只要确保它具有与这些函数返回的结构相同的结构即可。
您也可以更改单个属性，就像前面显示的解决方案一样。不过我用的是map.set((，因为我喜欢它。
$my-theme: map.set(
$my-theme,
color,
background,
background,
pink
);