diff --git a/scss/vendors/_prismjs.scss b/scss/vendors/_prismjs.scss
index 633eb2b..b1b724a 100644
--- a/scss/vendors/_prismjs.scss
+++ b/scss/vendors/_prismjs.scss
@@ -3,21 +3,35 @@
  *
  * Author: Leo Nguyen
  */
-$prism-bg: hsl(220, 15%, 20%);
-$prism-gray: hsl(210, 30%, 65%);
-$prism-red: hsl(0, 100%, 80%);
-$prism-orange: hsl(25, 100%, 70%);
-$prism-yellow: hsl(50, 100%, 70%);
-$prism-green: hsl(100, 80%, 80%);
-$prism-cyan: hsl(190, 100%, 80%);
-$prism-blue: hsl(230, 100%, 80%);
-$prism-purple: hsl(275, 100%, 80%);
+:root {
+  --prism-bg:     hsl(220, 15%, 20%);
+  --prism-gray:   hsl(210, 30%, 65%);
+  --prism-red:    hsl(0, 100%, 80%);
+  --prism-orange: hsl(25, 100%, 70%);
+  --prism-yellow: hsl(50, 100%, 70%);
+  --prism-green:  hsl(100, 80%, 80%);
+  --prism-cyan:   hsl(190, 100%, 80%);
+  --prism-blue:   hsl(230, 100%, 80%);
+  --prism-purple: hsl(275, 100%, 80%);
+}
+
+.prism-theme-material {
+  --prism-bg:     #263238;
+  --prism-gray:   #546e7a;
+  --prism-red:    #f07178;
+  --prism-orange: #f78c6c;
+  --prism-yellow: #ffcb6b;
+  --prism-green:  #c3e88d;
+  --prism-cyan:   #89ddff;
+  --prism-blue:   #82aaff;
+  --prism-purple: #c792ea;
+}
 
 pre {
   margin: 0.5rem 0 1rem;
   padding: 1.5rem;
   border-radius: 0.5rem;
-  background: $prism-bg;
+  background: var(--prism-bg);
   line-height: 1.5;
   overflow: auto;
   white-space: pre;
@@ -28,7 +42,7 @@ pre {
   code {
     padding: 0;
     color: #fff;
-    background: $prism-bg;
+    background: var(--prism-bg);
   }
 }
 
@@ -48,13 +62,13 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.selector,
   &.namespace,
   &.deleted {
-    color: $prism-red;
+    color: var(--prism-red);
   }
 
   /* Orange/Red (number, boolean, constant) */
   &.number,
   &.boolean {
-    color: $prism-orange;
+    color: var(--prism-orange);
   }
 
   /* Yellow (entity, class) */
@@ -65,7 +79,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.package,
   &.scope,
   &.attr-name {
-    color: $prism-yellow;
+    color: var(--prism-yellow);
   }
 
   /* Green (string, attribute) */
@@ -74,7 +88,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.property,
   &.attr-value,
   &.regex {
-    color: $prism-green;
+    color: var(--prism-green);
   }
 
   /* Cyan (symbol) */
@@ -85,13 +99,13 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.unit,
   &.hexcode,
   &.doctype-tag {
-    color: $prism-cyan;
+    color: var(--prism-cyan);
   }
 
   /* Blue (function) */
   &.function-name,
   &.function {
-    color: $prism-blue;
+    color: var(--prism-blue);
   }
 
   /* Purple (keyword) */
@@ -99,7 +113,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.important,
   &.builtin,
   &.atrule {
-    color: $prism-purple;
+    color: var(--prism-purple);
   }
 
   /* White (variable, CSS pseudo class) */
@@ -114,7 +128,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
   &.prolog,
   &.doctype,
   &.cdata {
-    color: $prism-gray;
+    color: var(--prism-gray);
   }
 
   // &.important,