Proposal: remove background-color from .mat-drawer-container

[adamdport]

Bug, feature request, or proposal:

Proposal: remove background-color from .mat-drawer-container

What is the expected behavior?

The common background that I've set in my app appears on a page with a drawer

What is the current behavior?

Putting a drawer on a page requires putting the page contents inside md-drawer-container which comes with background-color set that overrides any app background that's been set.

What are the steps to reproduce?

Add a drawer to a page with a non-standard background

What is the use-case or motivation for changing an existing behavior?

Overlays for drawers and sliders are typically supposed to block the majority of the UI. IMHO material shouldn't be providing a background-color for this majority.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

2.0.0-beta.10

Is there anything else we should know?

[ja5onkendall]

I agree with @adamdport I have to override this background color every time.

[rtaft]

You might as well add .color to that as well as it overrides both

[DjStorm]

PLease do it.

[wintersommer]

thats what is there currently , why ?

background-color: #fafafa;
color: rgba(0,0,0,.87);

[hcurnor]

.mat-drawer-container{
background-color: #fafafa;
color: rgba(0,0,0,.87);
}

Its reflecting on my svgs and other elements too (in safari). It should be removed

[jcanaan88]

Agreed. For those wondering how to get rid of it, it seems you just have to set the background color of the mat-sidenav-container. This worked for me:

.mat-sidenav-container { background-color: #f2f2f2; }

[upondeep]

This mat-drawer css is broken. It even overwrites my "routerLinkActive" color.

[HuiiBuh]

A fix would be really appreciated. Normally you would like to have your theme applied to everything... If you overwrite the .mat-app-background like shown you can at least get the mat-app-background class to be more dominant than the the drawer container, but that is not as nice as I would like it...

$primary: mat-palette($primary-palette);
$accent: mat-palette($md-secondary);
$warn: mat-palette($warning-palette);
$light-theme: mat-light-theme($primary, $accent, $warn);

.dark-theme {
  $dark-primary: mat-palette($primary-palette, 200, 300, 400);
  $dark-accent: mat-palette($md-secondary-dark);
  $dark-warn: mat-palette($warning-palette);
  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  // Fix the theme not getting applied to slider
  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
    $background: map-get($dark-theme, background);
    $foreground: map-get($dark-theme, foreground);

    background-color: mat-color($background, background) !important;
    color: mat-color($foreground, text) !important;
  }

  @include angular-material-theme($dark-theme);
}

[paco76]

I asked this question on stackoverflow, maybe it can help..

<mat-drawer-container class="red-container">
...
</mat-drawer-container>

.red-container {
  background-color: red;
}

[rickdgray]

These seems like a trivial fix. Has there been any movement on this?

[michahell]

This can cause very slight visual regressions in existing projects where background colors are just #FFF white, and makes it so that a first experience of implementing an Angular Material component requires a style FIX, as opposed to a style customization. Which in turn does not provide a good first experience, which is a bummer. Why is it there?

[RamZal365]

This is still open right? Not the first time I end up in this issue. I would like to also suggest to add the possibility of setting the color of the drawer using the app theme e.j. (color="primary")