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

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?

Solution

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.