我们可以使用Angular Material来定义自己的主题，包括修改背景和前景颜色。在确定主题时，主要涉及以下三个步骤：

1.在styles.scss文件中定义和引用自己的主题：

定义主题：

$my-theme: mat-light-theme(( color: ( primary: $my-primary, accent: $my-accent, warn: $my-warn, ) ));

引用主题：

@import '~@angular/material/theming'; @include mat-core(); @include angular-material-theme($my-theme);

2.在定义的主题中修改背景和前景颜色：

$my-theme: mat-light-theme(( color: ( primary: $my-primary, accent: $my-accent, warn: $my-warn, ), background: ( default: $my-background, ... ), foreground: ( default: $my-foreground, ... ) ));

3.在HTML模板页面中使用修改的主题：

4.可选：对于单个组件，可以通过使用Angular Material的API来使用自定义主题：

import {Component} from '@angular/core'; import {MatDialog} from '@angular/material/dialog';

@Component({ selector: 'app-example', template: Open dialog , }) export class ExampleComponent { constructor(public dialog: MatDialog) {}

openDialog() { const dialogRef = this.dialog.open(DialogExampleComponent, { // Use the custom dialog container defined in the app theme. panelClass: 'my-dialog-container-theme' }); } }

这就是如何在Angular Material中使用自定义主题来改变背景和前景颜色的示例。