diff --git a/src/assets/stylesheets/base/_colors.scss b/src/assets/stylesheets/base/_colors.scss
index 5d75eeff8..d0ec724fc 100644
--- a/src/assets/stylesheets/base/_colors.scss
+++ b/src/assets/stylesheets/base/_colors.scss
@@ -41,16 +41,34 @@
   --md-primary-fg-color:               hsla(#{hex2hsl($clr-indigo-500)}, 1);
   --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
   --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
-  --md-primary-bg-color:               var(--md-default-bg-color);
-  --md-primary-bg-color--light:        var(--md-default-bg-color--light);
+  --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);
 
   // Accent color shades
   --md-accent-fg-color:                hsla(#{hex2hsl($clr-indigo-a200)}, 1);
   --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
-  --md-accent-bg-color:                var(--md-default-bg-color);
-  --md-accent-bg-color--light:         var(--md-default-bg-color--light);
+  --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
+  --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
 
   // Code block color shades
   --md-code-bg-color:                  hsla(0, 0%, 96%, 1);
   --md-code-fg-color:                  hsla(200, 18%, 26%, 1);
 }
+
+// :root [data-md-color-scheme="dark"] {
+:root {
+
+  // Default color shades
+  --md-default-fg-color:               hsla(0, 0%, 100%, 1);
+  --md-default-fg-color--light:        hsla(0, 0%, 100%, 0.7);
+  --md-default-fg-color--lighter:      hsla(0, 0%, 100%, 0.3);
+  --md-default-fg-color--lightest:     hsla(0, 0%, 100%, 0.12);
+  --md-default-bg-color:               hsla(232, 15%, 21%, 1);
+  // --md-default-bg-color--light:        hsla(0, 0%, 0%, 0.54);
+  // --md-default-bg-color--lighter:      hsla(0, 0%, 0%, 0.26);
+  // --md-default-bg-color--lightest:     hsla(0, 0%, 0%, 0.07);
+
+  // Code block color shades
+  --md-code-bg-color:                  hsla(232, 15%, 18%, 1);
+  --md-code-fg-color:                  hsla(60, 30%, 96%, 1);
+}
diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss
index 1bd80514b..5708ad5a5 100644
--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@@ -267,6 +267,7 @@ kbd {
   mark {
     margin: 0 px2em(4px, 16px);
     padding: px2em(1px, 16px) 0;
+    color: currentColor;
     word-break: break-word;
     background-color: transparentize($clr-yellow-500, 0.5);
     border-radius: px2rem(2px);
diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss
index 7d007997c..fa6140f17 100644
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -139,7 +139,7 @@ hr {
   z-index: 3;
   width: 0;
   height: 0;
-  background-color: var(--md-default-fg-color--light);
+  background-color: hsla(0, 0%, 0%, 0.54);
   opacity: 0;
   transition:
     width     0ms 250ms,
diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss
index aed37575a..298e2e723 100644
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@@ -108,7 +108,7 @@ $md-toggle__search--checked:
       left: 0;
       width: 0;
       height: 0;
-      background-color: var(--md-default-fg-color--light);
+      background-color: hsla(0, 0%, 0%, 0.54);
       cursor: pointer;
       transition:
         width     0ms 250ms,
@@ -262,7 +262,7 @@ $md-toggle__search--checked:
       padding-left: px2rem(44px);
       color: inherit;
       font-size: ms(0);
-      background-color: var(--md-default-fg-color--lighter);
+      background-color: hsla(0, 0%, 0%, 0.26);
       border-radius: px2rem(2px);
       transition:
         background-color 250ms,
@@ -285,7 +285,7 @@ $md-toggle__search--checked:
 
       // Hovered search field
       &:hover {
-        background-color: var(--md-default-bg-color--lightest);
+        background-color: hsla(0, 0%, 100%, 0.12);
       }
 
       // Set light background on active search field
diff --git a/src/assets/stylesheets/palette.scss b/src/assets/stylesheets/palette.scss
index d3bb71f51..5046edf92 100644
--- a/src/assets/stylesheets/palette.scss
+++ b/src/assets/stylesheets/palette.scss
@@ -70,11 +70,11 @@
 
     // Inverted text for lighter shades
     @if index("lime" "yellow" "amber" "orange", $name) {
-      --md-primary-bg-color:           var(--md-default-fg-color);
-      --md-primary-bg-color--light:    var(--md-default-fg-color--light);
+      --md-primary-bg-color:           hsla(0, 0%, 0%, 0.87);
+      --md-primary-bg-color--light:    hsla(0, 0%, 0%, 0.54);
     } @else {
-      --md-primary-bg-color:           var(--md-default-bg-color);
-      --md-primary-bg-color--light:    var(--md-default-bg-color--light);
+      --md-primary-bg-color:           hsla(0, 0%, 100%, 1);
+      --md-primary-bg-color--light:    hsla(0, 0%, 100%, 0.7);
     }
   }
 }
@@ -88,8 +88,8 @@
   --md-primary-fg-color:               hsla(#{hex2hsl($clr-indigo-500)}, 1);
   --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
   --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
-  --md-primary-bg-color:               var(--md-default-bg-color);
-  --md-primary-bg-color--light:        var(--md-default-bg-color--light);
+  --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);
 
   // Application header (stays always on top)
   .md-header {
@@ -173,8 +173,8 @@
   --md-primary-fg-color:               hsla(#{hex2hsl($clr-indigo-500)}, 1);
   --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
   --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
-  --md-primary-bg-color:               var(--md-default-bg-color);
-  --md-primary-bg-color--light:        var(--md-default-bg-color--light);
+  --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
+  --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);
 
   // Application header (stays always on top)
   .md-header {
@@ -253,11 +253,11 @@
 
     // Inverted text for lighter shades
     @if index("lime" "yellow" "amber" "orange", $name) {
-      --md-accent-bg-color:            var(--md-default-fg-color);
-      --md-accent-bg-color--light:     var(--md-default-fg-color--light);
+      --md-accent-bg-color:           hsla(0, 0%, 0%, 0.87);
+      --md-accent-bg-color--light:    hsla(0, 0%, 0%, 0.54);
     } @else {
-      --md-accent-bg-color:            var(--md-default-bg-color);
-      --md-accent-bg-color--light:     var(--md-default-bg-color--light);
+      --md-accent-bg-color:           hsla(0, 0%, 100%, 1);
+      --md-accent-bg-color--light:    hsla(0, 0%, 100%, 0.7);
     }
   }
 }