Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar?
In the file src\styles.scss, I have the following:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
The template / HTML file includes:
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
Title text
</mat-toolbar>
This displays an indigo menu bar with the menu icon and Title text.
I now want a mat-sidenav below that (which will contain menu items) and I would like its background to match the color of the:
<mat-toolbar color="primary">
which is indigo according to the theme.
The code continues for rendering the mat-sidenav:
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" opened>
<app-vertical-menu></app-vertical-menu> // renders the menu items
</mat-sidenav>
<mat-sidenav-content>
<div class="app-main-area">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
However, the background and colors of the mat-sidenav don't reflect the applied theme, appearing blank instead.
I am aware that I can manually style the mat-sidenav background within the component by adding a class name in the template - for example:
...
<mat-sidenav #sidenav2 mode="side" opened class="vertical-menu">
...
and then define the style in the scss file:
.vertical-menu {
background-color: navy !important;
}
But what I really want is to apply the theme color from the default theme (e.g. indigo-pink.css) so that the background color of mat-sidenav matches the color scheme used for the toolbar.