diff --git a/examples/routes/index.html b/examples/routes/index.html
index d902ff90..966ce55d 100644
--- a/examples/routes/index.html
+++ b/examples/routes/index.html
@@ -46,7 +46,7 @@
Installing from NPM
Then import the material directives and providers
- import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material/all';
+ import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all";
Then reference the styles in your page
@@ -57,10 +57,20 @@
Installing from NPM
Or (more preferably) import them into your SCSS files.
- $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";
+ If you want to use custom theme colors, include the core
styles and override the theme variables
+ before including the components
.
+
+ $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";
+
diff --git a/ng2-material/all.scss b/ng2-material/all.scss
index de880707..47c3adf1 100644
--- a/ng2-material/all.scss
+++ b/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";
diff --git a/ng2-material/components.scss b/ng2-material/components.scss
new file mode 100644
index 00000000..349195dc
--- /dev/null
+++ b/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";
diff --git a/ng2-material/core.scss b/ng2-material/core.scss
new file mode 100644
index 00000000..15b3ed3c
--- /dev/null
+++ b/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";