I’m starting to learn Angular and learned how to apply color to a toolbar component using the following code snippet:

<mat-toolbar color="primary"> <span>My Application</span> </mat-toolbar>

However, when trying to customize my sidenav component, I tried to use color=”primary” and nothing happens:

`<mat-sidenav-container class=”example-container”>
<mat-sidenav color=”primary” #sidenav mode=”side” [(opened)]=”opened” (opened)=”events.push(‘open!’)”
(closed)=”events.push(‘close!’)”>
Sidenav content
</mat-sidenav>

<mat-sidenav-content>
  <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
  <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
  <p>Events:</p>
  <div class="example-events">
    @for (e of events; track e) {
      <div>{{e}}</div>
    }
  </div>
</mat-sidenav-content>

</mat-sidenav-container>`

Could someone help me? I would like to know why in some components the color attribute works and in others it doesn’t.

I tried to customize my Angular sidenav component using the color attribute, but it didn’t work.