feat(theming): provide a content wrapper attribute (#2170)

Adds the `md-app-background` class which users can apply to their wrapper element, in order to provide the theme background. This is necessary, because the only element that does this at the moment is `md-sidenav-container` and it's not something that necessarily everybody uses.

Fixes #1938.
Fixes #2106.

Author: crisbeto

guides/theming.md

@@ -40,6 +40,10 @@ The actual path will depend on your server setup.
 
 You can also concatenate the file with the rest of your application's css.
 
+Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
+need to add the `md-app-background` class to your wrapper element (for example the `body`). This
+ensures that the proper theme background is applied to your page.
+
 ### Defining a custom theme
 When you want more customization than a pre-built theme offers, you can create your own theme file.
 
@@ -98,7 +102,7 @@ secondary dark theme:
 
   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-  @include angular-material-theme($dark-theme);   
+  @include angular-material-theme($dark-theme);
 }
 ```
 

src/lib/core/_core.scss

@@ -27,4 +27,11 @@
 @mixin md-core-theme($theme) {
   @include md-ripple-theme($theme);
   @include md-option-theme($theme);
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `md-sidenav-container`.
+  .md-app-background {
+    $background: map-get($theme, background);
+    background-color: md-color($background, background);
+  }
 }