sidenav.component.scss-theme.scss

@import '~@angular/material/theming';
@mixin sidenav-component-theme($theme) {
  // retrieve variables from theme 
  // (all possible variables, use only what you really need)
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  .mat-sidenav{
    // let's take mat-toolbar's default theme
    // ref: https://github.com/angular/material2/blob/88601fa51d581f538468a9b63890b0e285e519cb/src/lib/toolbar/_toolbar-theme.scss#L39
    background-color: mat-color($background, app-bar);
    color: mat-color($foreground, text);

    // now, mat-toolbar's colored themes
    // ref: https://github.com/angular/material2/blob/e136fc8707ec3278ba32659e4d77ff21eed6de73/src/lib/toolbar/_toolbar-theme.scss#L6
    &[color=primary]{
      @include _mat-toolbar-color($primary);
    }
    &[color=accent]{
      @include _mat-toolbar-color($accent);
    }
    &[color=warn]{
      @include _mat-toolbar-color($warn);
    }
  }
}