feat(theme): make it easier to override themes in scss

 - add example to the main page
 - split the scss files into core/components, and have all include them.
 - be consistent in double quote usage for examples "

examples/routes/index.html

@@ -46,7 +46,7 @@ <h1 class="examples-title">Installing from NPM</h1>
     Then import the material directives and providers
   </p>
   <highlight type="typescript" class="md-subhead">
-    import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material/all';
+    import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all";
   </highlight>
   <p>
     Then reference the styles in your page
@@ -57,10 +57,20 @@ <h1 class="examples-title">Installing from NPM</h1>
   </highlight>
   <p>Or <em>(more preferably)</em> import them into your SCSS files.</p>
   <highlight type="scss" class="md-subhead">
-    $md-font-url: 'node_modules/ng2-material/dist/';
+    $md-font-url: "node_modules/ng2-material/dist/";
     @import "node_modules/ng2-material/dist/font";
     @import "node_modules/ng2-material/source/all";
   </highlight>
+  <p>If you want to use custom theme colors, include the <code>core</code> styles and override the theme variables
+    before including the <code>components</code>.</p>
+  <highlight type="scss" class="md-subhead">
+    $md-font-url: "node_modules/ng2-material/dist/";
+    @import "node_modules/ng2-material/dist/font";
+    @import "node_modules/ng2-material/source/core";
+    $md-primary: md-palette($md-brown, 500, 100, 700, $md-contrast-palettes);
+    $md-accent: md-palette($md-deep-orange, 500, 300, 700, $md-contrast-palettes);
+    @import "node_modules/ng2-material/source/components";
+  </highlight>
 </section>
 
 <md-divider></md-divider>

ng2-material/all.scss

@@ -1,30 +1,2 @@
-@import "core/style/variables";
-@import "core/style/mixins";
-@import "core/style/structure";
-@import "core/style/typography";
-@import "core/style/layout";
-@import "core/style/default-theme";
-
-
-@import "components/backdrop/backdrop";
-@import "components/button/button";
-@import "components/card/card";
-@import "components/content/content";
-@import "components/checkbox/checkbox";
-@import "components/dialog/dialog";
-@import "components/divider/divider";
-@import "components/icon/icon";
-@import "components/input/input";
-@import "components/list/list";
-@import "components/form/messages";
-@import "components/peekaboo/peekaboo";
-@import "components/progress_circular/progress_circular";
-@import "components/progress_linear/progress_linear";
-@import "components/radio/radio_button";
-@import "components/radio/radio_group";
-@import "components/sidenav/sidenav";
-@import "components/subheader/subheader";
-@import "components/switcher/switch";
-@import "components/toolbar/toolbar";
-@import "components/tabs/tabs";
-@import "components/whiteframe/whiteframe";
+@import "core";
+@import "components";

ng2-material/components.scss

@@ -0,0 +1,22 @@
+@import "components/backdrop/backdrop";
+@import "components/button/button";
+@import "components/card/card";
+@import "components/content/content";
+@import "components/checkbox/checkbox";
+@import "components/dialog/dialog";
+@import "components/divider/divider";
+@import "components/icon/icon";
+@import "components/input/input";
+@import "components/list/list";
+@import "components/form/messages";
+@import "components/peekaboo/peekaboo";
+@import "components/progress_circular/progress_circular";
+@import "components/progress_linear/progress_linear";
+@import "components/radio/radio_button";
+@import "components/radio/radio_group";
+@import "components/sidenav/sidenav";
+@import "components/subheader/subheader";
+@import "components/switcher/switch";
+@import "components/toolbar/toolbar";
+@import "components/tabs/tabs";
+@import "components/whiteframe/whiteframe";

ng2-material/core.scss

@@ -0,0 +1,6 @@
+@import "core/style/variables";
+@import "core/style/mixins";
+@import "core/style/structure";
+@import "core/style/typography";
+@import "core/style/layout";
+@import "core/style/default-theme";