diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
index 2df04a13e02a..8ec048f3b5a7 100644
--- a/src/lib/core/theming/_palette.scss
+++ b/src/lib/core/theming/_palette.scss
@@ -649,6 +649,7 @@ $md-light-theme-background: (
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
+  sidenav:    white,
   disabled-button:   rgba(black, 0.12)
 );
 
@@ -660,6 +661,7 @@ $md-dark-theme-background: (
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($md-grey, 800),
   dialog:     map_get($md-grey, 800),
+  sidenav:    #303030,
   disabled-button: rgba(white, 0.12)
 );
 
diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss
index c06036feeabe..1da8930be77f 100644
--- a/src/lib/sidenav/_sidenav-theme.scss
+++ b/src/lib/sidenav/_sidenav-theme.scss
@@ -14,10 +14,17 @@
   // we use a light backdrop.
   $sidenav-backdrop-color: invert(md-color($background, card, 0.6)) !default;
   $sidenav-background-color: md-color($background, dialog) !default;
+  $sidenav-layout-background-color:  md-color($background, sidenav) !default;
   $sidenav-push-background-color: md-color($background, dialog) !default;
 
+  md-sidenav-layout {
+    background-color: $sidenav-layout-background-color;
+    color: md-color($foreground, base);
+  }
+
   md-sidenav {
     background-color: $sidenav-background-color;
+    color: md-color($foreground, base);
 
     &.md-sidenav-push {
       background-color: $sidenav-push-background-color;