diff --git a/src/styles.scss b/src/styles.scss
index 66b0be18..6a3538c2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,8 +6,8 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.all-component-typographies();
 @include mat.core();
+@include mat.all-component-typographies();
 
 // import your custom themes
 @import 'theme-light.scss';
diff --git a/src/theme-contrast.scss b/src/theme-contrast.scss
index 8d9ba0ce..bab31a1a 100644
--- a/src/theme-contrast.scss
+++ b/src/theme-contrast.scss
@@ -9,9 +9,17 @@ $theme-contrast-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-contrast-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-contrast: mat.define-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-warn);
+$theme-contrast: mat.define-light-theme(
+	(
+		color: (
+			primary: $theme-contrast-primary,
+			accent: $theme-contrast-accent,
+			warn: $theme-contrast-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($theme-contrast);
+// @include mat.all-component-themes($theme-contrast);
diff --git a/src/theme-dark.scss b/src/theme-dark.scss
index 523bd4d0..cbe5f4c3 100644
--- a/src/theme-dark.scss
+++ b/src/theme-dark.scss
@@ -9,9 +9,17 @@ $theme-dark-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-dark-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-dark: mat.define-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-warn);
+$theme-dark: mat.define-dark-theme(
+	(
+		color: (
+			primary: $theme-dark-primary,
+			accent: $theme-dark-accent,
+			warn: $theme-dark-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($theme-dark);
+// @include mat.all-component-themes($theme-dark);
diff --git a/src/theme-light.scss b/src/theme-light.scss
index 5704d6ce..134e3795 100644
--- a/src/theme-light.scss
+++ b/src/theme-light.scss
@@ -9,9 +9,17 @@ $theme-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $theme-light-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-light: mat.define-light-theme($theme-light-primary, $theme-light-accent, $theme-light-warn);
+$theme-light: mat.define-light-theme(
+	(
+		color: (
+			primary: $theme-light-primary,
+			accent: $theme-light-accent,
+			warn: $theme-light-warn,
+		),
+	)
+);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($theme-light);
+// @include mat.all-component-themes($theme-light);