MatToolbar color doesn't work on Angular Material v18 Red/Rose

Question

I just upgraded my Angular CLI and Angular Material both to v18. All Angular Material components work fine except the MatToolbar. The problem is that the color input doesn't do anything in the mat-toolbar tag. The toolbar color currently is so close to the background which is white and there's only a shade of it visible.

Here's the code.

<mat-toolbar color="primary"></mat-toolbar>

Is anyone experiencing the same issue? Any solution found?

Thanks in advance.

I tried

• Created a fresh project to make sure no global/local CSS is interfering.
• Set a background-color: red for the mat-toolbar in CSS manually and it works fine.

Expecting The toolbar to look like the Angular website with the Rose/Red theme. https://material.angular.io/components/toolbar/overview

UPDATE

Please before responding pay attention that my question is not about how to manually add/edit a custom theme. Here's the clearance;

<button mat-button color="primary">Button</button> Works

<mat-icon color="primary">home</mat-icon> Works

<mat-toolbar color="primary">toolbar space</mat-toolbar> Does NOT work. Why?

Suksukarno

Answer 1

You are mixing the concepts for material design M2 and material design M3. The options color="primary", color="accent", and color="warn" are color variant options for M2 design theming.

The Angular team recommends not relying on these options in M3. However, they provide backward compatibility styles that restore the behavior of the API in case you want to transition from M2 to M3 theming:

@use '@angular/material' as mat;

$theme: mat.define-theme();

html {
  @include mat.all-component-themes($theme);
  // This line allows you to use color="..." for your toolbar.
  @include mat.color-variants-backwards-compatibility($theme);
}

You can read more about this in the theming documentation here.

Net

do you have an example of doing it the M3 way? – Celom

The answer from Naren Murali tells you how to do this the M3 way. Please browse the Angular Material Docs GitHub repository, which shows you how to overwrite the toolbar color. – Net

@Net - The problem is the docs clearly state you can do it, and recommend it as the way to update the color material.angular.io/components/toolbar/overview#theming – Frug

@Matt Westlake The docs have since been updated with the following note to the color property: "Theme color of the toolbar. This API is supported in M2 themes only, it has no effect in M3 themes." – Net

@Celom There is an Angular Material docs section explaining theming in some detail. Let me know if this works for you: material.angular.io/guide/… – Net

Thank you. I'm about to select your answer as the thread's solution. I'm placing the code you provided in my style.css but the issue persists. Do you have a solution for it? – Suksukarno

Answer 2

The docs for this are from material.angular.io/src/app/shared/navbar /_navbar-theme.scss

We can use the mixin provided below and manually set the desired background-color. Do refer the example scss file in the link for more options.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$rose-palette,
      tertiary: mat.$red-palette,
    ),
  )
);

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

@mixin theme($theme) {
  app-navbar {
    color: mat.get-theme-color($theme, primary);

    mat-toolbar {
      background: mat.get-theme-color($theme, primary-container);
    }
  }
}

:root {
  @include mat.all-component-themes($theme);
  @include theme($theme);
}

Stackblitz Demo

Harsho

Thanks for the reply Naren. Unfortunately I couldn't get your solution to work and for some reasons it doesn't run in the provided stackblitz. My main question though is that should the toolbar of the default theme Red/Rose not to change color by the already provided color="primary"? I'm not asking for a custom theme in this case. I could change toolbar colors out of the box in the Material up to v17. – Suksukarno

@RezaTaba You mean create a custom theme? please share the old CSS that did it, so that I can check why it does not work in latest versions! – Harsho

@RezaTaba stackblitz works for me. Also, I adapted the code for my application and it works too – Romola

I don't like that we have to jump through hoops to get colors working properly. It clearly states that we can just set the color property: material.angular.io/components/toolbar/overview#theming – Frug

@MattWestlake That doesn't work stackblitz maybe raise a github issue on angular components, here user wanted a custom color, hence I got this fix from their source code. – Harsho

@NarenMurali No I'm not looking for a custom theme. I'm wondering why the color="primary" doesn't work out of the box on matToolbar unlike all other materials. – Suksukarno

@MattWestlake You got the point. I'm exactly looking for that default option instead of the modifying stylesheet manually every time. – Suksukarno

@RezaTaba The default color is a light color, if you want a different color, var(--mat-toolbar-container-background-color) is the variable you need to change. Else consider changing the theme colors – Harsho

@NarenMurali According to the official website, the default/primary color is not light. Please test it from the link I left in the question and select primary in the components. – Suksukarno

Answer 3

Using Angular 18.0.4: It took me several days to figure this out. What you need is the following in your styles.css:

:root {
  mat-toolbar {
    --mat-toolbar-container-background-color: #{mat.get-theme-color($theme, primary, 40)};
  }
}

Ensure to wrap the colour using #{...} You might be able to remove the mat-toolbar tag and keep the one-liner in :root{ ... } if one theme is being used. However, if a light theme and a dark theme are used, then use the following snippet:

$light-theme: mat.define-theme((color: (theme-type: light,
        primary: mat.$azure-palette,
        tertiary: mat.$blue-palette,
      )));

$dark-theme: mat.define-theme((color: (theme-type: dark,
        primary: mat.$magenta-palette,
        tertiary: mat.$violet-palette,
      )));

@include mat.core();
@include mat.color-variants-backwards-compatibility($light-theme);

:root {
  @include mat.all-component-themes($light-theme);
}

.dark-theme {
  @include mat.all-component-colors($dark-theme);
  --mat-toolbar-container-background-color: #{mat.get-theme-color($dark-theme, primary, 30)};

}

.light-theme {
  --mat-toolbar-container-background-color: #{mat.get-theme-color($light-theme, primary, 80)};
}

To test the light/dark theme, use:

<div style="margin: 8px"></div>
<div ngClass="light-theme">
  <mat-toolbar>
    <button mat-button>First</button>
    <button mat-button>Second</button>
    <button mat-button>Third</button>
  </mat-toolbar>
</div>
<div style="margin: 8px"></div>
<div ngClass="dark-theme">
  <mat-toolbar>
    <button mat-button>First</button>
    <button mat-button>Second</button>
    <button mat-button>Third</button>
  </mat-toolbar>
</div>

The output should be

The only incompleteness I recognize is color="primary" or color="secondary" or other colour wouldn't work as they will be overridden by the colour in #{...}. In case there is a workaround this, please update this comment and write the solution.

Vin