diff --git a/docs/assets/scss/mdb/_component-examples.scss b/docs/assets/scss/mdb/_component-examples.scss
index 13f8bcfb..b10ad3f8 100644
--- a/docs/assets/scss/mdb/_component-examples.scss
+++ b/docs/assets/scss/mdb/_component-examples.scss
@@ -3,5 +3,5 @@
 //
 
 .highlight {
-  background-color: $grey-200;
+  background-color: $code-bg;
 }
diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss
index fe7df716..546cd944 100644
--- a/scss/includes/_variables.scss
+++ b/scss/includes/_variables.scss
@@ -16,6 +16,7 @@ $enable-flex: true;
 @import 'variables/body';
 @import 'variables/brand';
 @import 'variables/buttons';
+@import 'variables/code';
 @import 'variables/state';
 @import 'variables/type';
 
diff --git a/scss/includes/variables/_code.scss b/scss/includes/variables/_code.scss
new file mode 100644
index 00000000..9e101881
--- /dev/null
+++ b/scss/includes/variables/_code.scss
@@ -0,0 +1,12 @@
+// Code
+
+//$code-color:                  #bd4147 !default;
+$code-bg:                     $grey-200 !default; // #f7f7f9 !default;
+
+//$kbd-color:                   #fff !default;
+//$kbd-bg:                      #333 !default;
+//
+//$pre-bg:                      #f7f7f9 !default;
+//$pre-color:                   $gray-dark !default;
+//$pre-border-color:            #ccc !default;
+//$pre-scrollable-max-height:   340px !default;