如何通过angular material theming修改mat-toolbar背景色？

本文共计805个文字，预计阅读时间需要4分钟。

最近学习 Angular，记录一下昨天的进展。主要解决了通过 theme 的配置修改 mat-toolbar 的背景色问题，避免了硬编码色彩。

首先，通过 mat-toolbar 的实现源代码，了解到以下步骤：

1. 使用 `_to` 方法设置 toolbar 的背景色。

2.在主题配置中指定背景色。

具体操作如下：

1. 在主题配置文件中，找到 `mat-toolbar` 的样式设置。

2.将背景色设置为所需颜色，例如 `background-color: #333;`。

3.保存文件，刷新页面，即可看到背景色已更新。

这样，我们就通过配置而非硬编码的方式，成功修改了 mat-toolbar 的背景色。

最近在学习 angular，记录一下昨天的进展，解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色，避免对色彩的硬编码。

首先通过 mat-toolbar （以下统一称为 toolbar）的实现源代码 _toolbar-theme.scss 得知背景色来自 theme 中 background palette 的 app-bar。