I am hoping to have the background of a mat-sidenav
the same as my mat-toolbar
- theme color.
In src\styles.scss
I have:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
My template / HTML file has:
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
Title text
</mat-toolbar>
That shows nicely as indigo menu bar with the menu
icon and Title text
.
Below I want a mat-sidenav
(that will have menu items) and I expect the entire background of the mat-sidenav
area have the same color as the:
<mat-toolbar color="primary">
which is indigo - defined by the theme.
The HTML code continues for rendering 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>
The mat-sidenav
background and colors are untouched by the applied theme and its background colors are blank.
I know I can style the mat-sidenav
background within the component using class name in the template - e.g:
...
<mat-sidenav #sidenav2 mode="side" opened class="vertical-menu">
...
and in the style/scss file:
.vertical-menu {
background-color: navy !important;
}
But instead I want to apply the theme color of the default theme (e.g: indigo-pink.css
), so the mat-sidenav
background color is the same as the theme that we use to get our toolbar color
You would need to apply a custom theme to your component. To summarize:
style.scss
my-component.component.scss-theme.scss
. This can be different from my-component.component.scss
. You can separate out theming (color and typography) in theme file and other things (sizing, position, etc.) in the non-theme file.style.scss
I have created a sample application on Stackblitz. As you would see, mat-sidenav
and mat-toolbar
are having the same theme. You can try by giving color=primary|accent|warn
to mat-toolbar
and mat-sidenav
Tomas Trajan has written a very nice medium blog at The complete guide to Angular Material Themes. You can find Angular team's document at Theming your own components.
Update 12th Dec 2019
I have created a series of posts for detailed understanding of Angular Material Theme on Medium. You can find them here: Create, Understand and Apply theme.
Update 1st October 2020
I have created updated series of posts for detailed understanding of Angular Material Theme on Medium. You can find them here: Create, Understand and Apply theme.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With