Search code examples
angularangular-materialmaterial-design

How to have a custom background colour on a material toolbar?

I have an app for which I made a custom theme with a background colour:

@import '~@angular/material/theming';

@include mat-core();

$custom-theme-primary: mat-palette($mat-lime);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);

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

$custom-background-color: map_get($mat-grey, 0);
$background: map-get($custom-theme, 'background');
$background: map_merge($background, ('background': $custom-background-color));
$custom-theme: map_merge($custom-theme, ('background': $background));

@include angular-material-theme($custom-theme);

Now, I'm trying to have the mat-toolbar containing the right hand button have the same whitish colour as the mat-card background colour.

But the toolbar background remains grey.

I wish I could do without the toolbar that contains this button, but it's the way I found to have it align right.

I'm sure there are some CSS ways to achieve this, but I prefer not to dive into CSS hacking. I consider Angular Material is there to protect me.

The template markup is:

<mat-card>
  <mat-card-content>
    <mat-toolbar color="background">
      <span class="fill-remaining-space"></span>
      <button mat-fab color="accent" (click)="generateSoundtrack()">
        <mat-icon mat-icon>add</mat-icon>
      </button>
    </mat-toolbar>
  </mat-card-content>
</mat-card>

The CSS file companion to the template:

.fill-remaining-space {
  flex: 1 1 auto;
}

.soundtrack-action {
  padding-left: 30px;
}

.soundtrack {
  padding-bottom: 50px;
}

mat-icon {
  cursor: pointer;
}

UPDATE: I could solve my issue of the differing background colours with the following theme configuration:

// Applying a custom theme
$palette-primary: mat-palette($mat-lime);
$palette-accent: mat-palette($mat-orange);
$palette-warn: mat-palette($mat-red);
$standard-light-theme: mat-light-theme($palette-primary, $palette-accent, $palette-warn);
@include angular-material-theme($standard-light-theme);

// Changing some palette properties of a theme and applying it to a component
$background: map-get($standard-light-theme, background);
$bg-color: #FFFFFF;
$background: map_merge($background, (background: $bg-color, app-bar: $bg-color));
$custom-light-theme: map_merge($standard-light-theme, (background: $background));
@include mat-toolbar-theme($custom-light-theme);
Solution

  • There are several ways to achieve this, in the example that I am going to show you, use an alternative theme for the material button component, you can use an alternative theme for any material component (altertive-material-component-theme).

    The other options you have:

    And this is the working example stackblitz