Color attribute not applying color to md-sidenav

Bug, feature request, or proposal:

Hey guys, so I am using angular2 + material to build a new idea I have and attempted to apply color to md-sidenav. It seems that the “color” attribute has no affect at all on the md-sidenav component.

What is the expected behavior?

I expect the background color of the md-sidenav component to change color when I add the “color” attribute. This color should reflect the value I pass in (color=“primary” etc.)

What is the current behavior?

The background color is not changing at all. It is a white background as set by:

md-sidenav {
    background-color: white;
    color: rgba(0, 0, 0, 0.87);
}

What are the steps to reproduce?

Simply try adding a color to the md-sidenav component using the “color” attribute. http://plnkr.co/edit/L01XgLc93vILoyRpPP7V

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

The use-case would be to allow easy theming of the md-sidenav component.

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

Here is the environment I am developing it (fresh install from earlier yesterday from NPM):

$ ng -v

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.31
node: 7.4.0
os: linux x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

$ uname -a
Linux ***** 4.8.13-1-ARCH #1 SMP PREEMPT Fri Dec 9 07:24:34 CET 2016 x86_64 GNU/Linux

$ google-chrome-stable --version
Google Chrome 55.0.2883.87

Is there anything else we should know?

You guys are awesome 😃

[michael-lang]

@zendist yes, there is an official way to create multiple themes and apply one to an element and descendents. However, there is an issue #4344 in applying it directly to a sidenav due to the html structure requirement. See #4344 for temporary work-around and details why it doesn’t work now.

[zendist]

I think what @staticinteger is referring to is there is no way to set background color of sidenav component other than the default one. @michael-lang do you know how to specify theme that should be used? I didn’t find anything about theming sidenav, maybe I missed it…

Just adding .scss file with custom theme didn’t work for me.