Angular 6,7 How to apply default theme color to mat-sidenav background?

user_7960402 0
Viewed 19389

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

angular-material angular css html
2 Answers

You would need to apply a custom theme to your component. To summarize:

  1. Define your theme in style.scss
  2. Define component theme, ex. 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.
  3. Include and call component theme in 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.

user_33399070

I know this is not what you want(me neither), but I defined a class in my styles.css with the same primary color as indigo-pink theme

.background-primary { background-color: #3f51b5; }

and my mat-sidenav like this:

<mat-sidenav class="background-primary"...

user_137894030
Related