bug(Toolbar): Defined background colors does not get applied with version 17.3.1

[Asac2142]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

If you go to the official Angular Material docs, and select component Toolbar, examples tab, you see in action the usage of toolbar with a color defined such as primary but you don't see any color applied to it.

If you open up any of the examples to Stackblitz, you can clearly see that any of the defined colors "warn", "primary", "accent" does not get applied in the toolbar property

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

<mat-toolbar color="warn">
 ...
</mat-toolbar>

<mat-toolbar color="accent">
 ...
</mat-toolbar>

Reproduction

StackBlitz link: https://stackblitz.com/edit/ga5498?file=src%2Fexample%2Ftoolbar-overview-example.html

Steps to reproduce:

1. Specify one of the colors predefined such as warn, primary, accent to the toolbar component

Expected Behavior

If the developer specifies a color to a toolbar, either a predefined one or a custom one, then the color should take effect into the material component (e.g toolbar)

Actual Behavior

Specifying any of the predefined colors does not get applied in the toolbar component

Environment

• Angular: 17.3.0
• CDK/Material: 17.3.1
• Browser(s): Firefox 124.01 or Chrome 123.0.6312.86
• Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint

[BaronVonPerko]

I've experienced this as well playing with the new M3 styles.

[BaronVonPerko]

I think I may have found the issue, if I can fix it I will raise a PR

[amysorto]

This is intentional as it is a part of the M3 spec. Althought yes the docs and examples should be updated to remove these custom colors that used to work in M2.

[Asac2142]

This is intentional as it is a part of the M3 spec. Althought yes the docs and examples should be updated to remove these custom colors that used to work in M2.

Your answer quite scares me, you are saying this is intentional, so the other bugs reported based on missing colors applied in other Angular Material components are okay, is not a bug, is a feature.
M3 doesn't look correct.

What's the point of having a toolbar with the attribute color if none of the colors will be applied? in order words, what is the purpose of doing this

<mat-toolbar color="warn">...</mat-toolbar>

If neither warn, primary, accent, or any custom color is applied? Don't tell me the color attribute is going to be deprecated.

[BaronVonPerko]

This is intentional as it is a part of the M3 spec. Althought yes the docs and examples should be updated to remove these custom colors that used to work in M2.

Your answer quite scares me, you are saying this is intentional, so the other bugs reported based on missing colors applied in other Angular Material components are okay, is not a bug, is a feature. M3 doesn't look correct.

What's the point of having a toolbar with the attribute color if none of the colors will be applied? in order words, what is the purpose of doing this

<mat-toolbar color="warn">...</mat-toolbar>

If neither warn, primary, accent, or any custom color is applied? Don't tell me the color attribute is going to be deprecated.

Agreed. If this is being deprecated, it needs to be made known in the docs. I understand that m2 will be supported for quite some time, but this is a pretty big change.

[wagnermaciel]

Hi, maybe it would be good to take a step back and add some context here

The purpose of the color input is to allow users to switch which palette is being used for a specific component. This functionality will still exist in M3 via the optional backwards compatibility api

https://material.angular.io/guide/material-3#optional-add-backwards-compatibility-styles-for-color-variants

The important distinction here is that in M3, the background color of the toolbar (or app bar as it is called on their docs) comes from the "neutral" palette. Because of this, the background color of the toolbar is always a neutral tone, even when switching between different palettes

https://m3.material.io/components/top-app-bar/specs

This is different from the M2 toolbar which used a color for it's background
https://m2.material.io/components/app-bars-top

Edit:
Also, here is an example showcasing that the color input still works in M3
https://stackblitz.com/edit/ga5498-wp2khz?file=src%2Fexample%2Ftoolbar-overview-example.html

[BaronVonPerko]

Thank you for the clarification @wagnermaciel. I'm happy to learn about this backwards compatibility!

@include matx.color-variants-back-compat($theme);

[BaerMitUmlaut]

The important distinction here is that in M3, the background color of the toolbar (or app bar as it is called on their docs) comes from the "neutral" palette. Because of this, the background color of the toolbar is always a neutral tone, even when switching between different palettes

The material docs are a great example why this doesn't work well with a global navbar. Remove the light blue background and it looks awful.

[Peperud]

The important distinction here is that in M3, the background color of the toolbar (or app bar as it is called on their docs) comes from the "neutral" palette. Because of this, the background color of the toolbar is always a neutral tone, even when switching between different palettes

The material docs are a great example why this doesn't work well with a global navbar. Remove the light blue background and it looks awful.

Touché!

Just upgraded an app and ran into this (and not only). My eyes hurt...

[probert94]

It looks like the toolbar uses --mat-toolbar-container-background-color as background and --mat-toolbar-container-text-color as color.
That said, you should be able to change this properties to primary and primary-contrast etc. using theming.
If you use a similar approach to what I described here, it should be as simple as this:

mat-toolbar[color="primary"] {
  --mat-toolbar-container-background-color: var(--mat-primary);
  --mat-toolbar-container-text-color: var(--mat-on-primary);
}

I haven't tried this yet, so I am not sure if it works like this!