Modify the background color of mat-toolbar based on the angular material theming mechanism (example details)

Recently I am learning angular and recording yesterday's progress. The problem I solved is to modify the background color of mat-toolbar through the theme's configuration to avoid hard coding of the colors.

First, the source code of mat-toolbar (hereinafter referred to as toolbar) is implemented._toolbarI learned that the background color comes from the background palette in themeapp-bar。

background: -color-from-palette($background, app-bar);

So I modified it through the following scss codeapp-barThe color value of

$app-bar-background: map-get(mat.$grey-palette, 900);
$background-palette: map-get($theme, background);
$background-palette: map-merge($background-palette, (app-bar: $app-bar-background));
$theme: map-merge($theme, (background: $background-palette));

Note: The first line of code is the background color we want to use

However, I found that the above modification did not work for toolbar, and the modified background color can be obtained through the following code

$background-palette: map-get($theme, background);
background-color: -color-from-palette($background-palette, app-bar);

It seems that mat-toolbar does not get the background color through the background of the theme.

View the source code of the definition-light-theme implementation_theming.scssDiscover the following code

@if $accent != null {
    @warn $_legacy-theme-warning;
    @return private-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-light-color-config($primary, $accent, $warn),
    )));
  }

From this guess, toolbar may be legacy theme

Further view the toolbar implementation source code_toolbar

@mixin theme($theme-or-color-config) {
  $theme: -legacy-get-theme($theme-or-color-config);
  @include -check-duplicate-theme-styles($theme, 'mat-toolbar') {
    $color: -color-config($theme);
    $density: -density-config($theme);
    $typography: -typography-config($theme);
    // ...
  }
}

It's indeed legacy theme.

Finally, adding the following code based on the previous code solved the problem.

$color-palette: map-get($theme, color);
$color-background-palette: map-get($color-palette, background);
$color-background-palette: map-merge($color-background-palette, (app-bar: $app-bar-background));
$color-palette: map-merge($color-palette, (background: $color-background-palette));
$theme: map-merge($theme, (color: $color-palette));

Reference materials found during the solution to this problem

Changing the background color in an Angular Material theme

How to get the current angular theme's color of a specific component

Allow overriding of theme background and foreground colors

This is the article about modifying the background color of mat-toolbar based on the angular material theme mechanism. For more related contents of modifying the background color, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!