diff --git a/projects/market/src/app/skills/install-button/install-button.component.scss b/projects/market/src/app/skills/install-button/install-button.component.scss
index 470317d..af50d79 100644
--- a/projects/market/src/app/skills/install-button/install-button.component.scss
+++ b/projects/market/src/app/skills/install-button/install-button.component.scss
@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';
 @import 'mycroft-colors';
 
 @mixin install-status {
@@ -26,13 +27,13 @@ fa-icon {
 
 #install-button {
     @include install-status;
-    background-color: $mycroft-primary ;
-    color: $mycroft-white;
+    background-color: mat-color($mycroft-primary) ;
+    color: mat-contrast($mycroft-primary, 500);
 }
 #install-button:hover {
     @include install-status;
-    background-color: $mycroft-tertiary-green;
-    color: $mycroft-secondary;
+    background-color: mat-color($mycroft-accent, A100);
+    color: mat-color($mycroft-accent);
 }
 
 #installed-button {
@@ -41,8 +42,8 @@ fa-icon {
 
 #installing-button {
     @include install-status;
-    background-color: $mycroft-tertiary-green;
-    color: $mycroft-secondary;
+    background-color: mat-color($mycroft-accent, A100);;
+    color: mat-color($mycroft-accent);
     mat-spinner {
         float: left;
         margin-right: 10px;
@@ -51,30 +52,30 @@ fa-icon {
 }
 #installing-spinner {
     @include spinner-common;
-    border-right-color: $mycroft-secondary;
-    border-top-color: $mycroft-secondary;
+    border-right-color: mat-color($mycroft-accent);
+    border-top-color: mat-color($mycroft-accent);
 }
 
 
 #uninstall-button {
     @include install-status;
-    background-color: $mycroft-dark-grey;
-    color: $mycroft-white;
+    background-color: mat-color($mycroft-accent, A700);
+    color: mat-contrast($mycroft-accent, 500);
 }
 .uninstall-button:hover {
     @include install-status;
     border: none;
-    background-color: #eb5757;
-    color: $mycroft-white;
+    background-color: mat-color($mycroft-warn);
+    color: mat-contrast($mycroft-primary, 500);
 }
 
 #uninstalling-button {
     @include install-status;
-    background-color: #eb5757;
-    color: $mycroft-white;
+    background-color: mat-color($mycroft-warn);
+    color: mat-contrast($mycroft-primary, 500);
 }
 #uninstalling-spinner {
     @include spinner-common;
-    border-right-color: $mycroft-white;
-    border-top-color: $mycroft-white;
+    border-right-color: mat-contrast($mycroft-primary, 500);
+    border-top-color: mat-contrast($mycroft-primary, 500);
 }
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
index 1403341..2600b42 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
@@ -1,8 +1,9 @@
+@import '~@angular/material/theming';
 @import 'mycroft-colors';
 @import "components/text";
 
 #skill-detail-body {
-    background-color: $mycroft-white;
+    background-color: mat-contrast($mycroft-primary, 500);
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     margin-bottom: 50px;
@@ -12,14 +13,14 @@
     padding-top: 3vh;
 
     .mat-subheading-1 {
-        color: $mycroft-dark-grey;
+        color: mat-color($mycroft-accent, A700);
         font-variant: small-caps;
         font-weight: 500;
         margin-bottom: 5px;
     }
 
     .mat-body-1 {
-        color: $mycroft-secondary;
+        color: mat-color($mycroft-accent);
     }
 
     #kde-icon {
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
index 527f5e4..d4d8cce 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 @import "components/buttons";
 
@@ -10,7 +11,7 @@
     padding-right: 4vw;
     padding-top: 4vh;
     #skill-detail-header-left {
-        color: $mycroft-secondary;
+        color: mat-color($mycroft-accent);
         margin-right: 50px;
         min-width: 340px;
         fa {
@@ -34,13 +35,13 @@
             @include action-button;
             width: 140px;
             &:hover {
-                background-color: $mycroft-tertiary-green;
-                color: $mycroft-secondary;
+                background-color: mat-color($mycroft-accent, A100);
+                color: mat-color($mycroft-accent);
             }
         }
 
         #github-button {
-            color: $mycroft-dark-grey;
+            color: mat-color($mycroft-accent, A700);
             font-weight: normal;
             width: 135px;
             fa-icon {
diff --git a/projects/market/src/app/skills/skill-detail/skill-detail.component.scss b/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
index a368c6f..d53206a 100644
--- a/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
+++ b/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 @mixin skill-detail-size {
@@ -7,7 +8,7 @@
 
 #navigate-back {
     @include skill-detail-size;
-    color: $mycroft-dark-grey;
+    color: mat-color($mycroft-accent, A700);
     padding-bottom: 10px;
 }
 
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
index 1ec47c3..96dcb52 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 #card-header {
@@ -16,7 +17,7 @@
     width: 20px;
 
     fa-icon {
-        color: $mycroft-tertiary-green;
+        color: mat-color($mycroft-accent, A100);
         font-size: 20px;
     }
 }
diff --git a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
index bf5d5e3..da2fba5 100644
--- a/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 @import "components/text";
 
@@ -19,7 +20,7 @@ mat-card {
 
     mat-card-title {
         @include ellipsis-overflow;
-        color: $mycroft-secondary;
+        color: mat-color($mycroft-accent);
         font-family: 'Roboto Mono', monospace;
         font-weight: bold;
         margin-bottom: 16px;
@@ -34,7 +35,7 @@ mat-card {
     }
 
     mat-card-content {
-        color: $mycroft-secondary;
+        color: mat-color($mycroft-accent);
         @include ellipsis-overflow;
         text-align: center;
     }
diff --git a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
index 34dbca8..b7957bb 100644
--- a/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
@@ -1,7 +1,8 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 fa-icon {
-    color: $mycroft-dark-grey;
+    color: mat-color($mycroft-accent, A700);
 }
 
 #skill-toolbar {
@@ -10,7 +11,7 @@ fa-icon {
     #search-field {
         background-color: white;
         border-radius: 10px;
-        color: $mycroft-dark-grey;
+        color: mat-color($mycroft-accent, A700);
         min-width: 330px;
         padding-left: 20px;
         padding-right: 20px;
@@ -23,7 +24,7 @@ fa-icon {
 }
 
 #back-button {
-    color: $mycroft-dark-grey;
+    color: mat-color($mycroft-accent, A700);
     margin-left: 20px;
     width: 100px;
 }
diff --git a/projects/market/src/app/skills/skill-summary/skill-summary.component.scss b/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
index 72dbdbc..7c4d98c 100644
--- a/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
+++ b/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
@@ -1,11 +1,12 @@
+@import "~@angular/material/theming";
 @import 'mycroft-colors';
 
 #skill-category {
-    background-color: $market-background;
+    //background-color: $market-background;
 
     mat-toolbar {
-        background-color: $market-background;
-        color: $mycroft-dark-grey;
+        //background-color: $market-background;
+        color: mat-color($mycroft-accent, A700);
         font-size: xx-large;
         margin-top: 20px;
         padding-left: 10px;
diff --git a/src/stylesheets/components/_text.scss b/src/stylesheets/components/_text.scss
index 6c19ef4..368b53b 100644
--- a/src/stylesheets/components/_text.scss
+++ b/src/stylesheets/components/_text.scss
@@ -1,3 +1,4 @@
+@import "~@angular/material/theming";
 @import "../mycroft-colors";
 
 @mixin ellipsis-overflow {
@@ -7,16 +8,16 @@
 }
 
 @mixin skill-trigger {
-    background-color: $mycroft-blue-grey;
+    background-color: mat-color($mycroft-accent, A700);
     border-radius: 4px;
-    color: $mycroft-secondary;
+    color: mat-color($mycroft-accent);
     font-weight: normal;
     padding-bottom: 7px;
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 7px;
     fa-icon {
-        color: $mycroft-primary;
+        color: mat-color($mycroft-primary);
         margin-right: 5px;
     }
 }