diff --git a/README.md b/README.md
index d6837cf..e767d5b 100644
--- a/README.md
+++ b/README.md
@@ -28,9 +28,12 @@ You can easily customize the color of the header bar and the links by updating
 the following variables in the `material/styles/main.css` file.
 
 ```css
+/* COLOR VARIABLES*/
 :root {
-  --primary-color: #1565c0; /* Header color */
-  --primary-dark: #003c8f; /* Link color */
-  --primary-light: #5e92f3; /* Link:hover color */
+  --header-bg-color: #0d47a1;
+  --header-ft-color: #fff;
+  --highlight-light: #5e92f3;
+  --highlight-dark: #003c8f;
+  --font-color: #34393e;
 }
 ```
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 1b17ebc..5cb54b6 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Version 0.3.1 - January 13th 2020
+
+- Minor update in styles and shadows.
+
 ## Version 0.3.0 - December 2nd 2019
 
 - Added easy customization of header and link colors.
diff --git a/docs/docfx.json b/docs/docfx.json
index f7cc854..39e663c 100644
--- a/docs/docfx.json
+++ b/docs/docfx.json
@@ -19,6 +19,7 @@
         ]
       }
     ],
+    "markdownEngineName": "markdig",
     "dest": "_site",
     "globalMetadataFiles": [],
     "fileMetadataFiles": [],
diff --git a/docs/index.md b/docs/index.md
index 814fb4b..54779e0 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -28,10 +28,13 @@ You can easily customize the color of the header bar and the links by updating
 the following variables in the `material/styles/main.css` file.
 
 ```css
+/* COLOR VARIABLES*/
 :root {
-  --primary-color: #1565c0; /* Header color */
-  --primary-dark: #003c8f; /* Link color */
-  --primary-light: #5e92f3; /* Link:hover color */
+  --header-bg-color: #0d47a1;
+  --header-ft-color: #fff;
+  --highlight-light: #5e92f3;
+  --highlight-dark: #003c8f;
+  --font-color: #34393e;
 }
 ```
 
@@ -48,3 +51,21 @@ For more reference about markdown support in DocFX check the
 >
 > [!CAUTION]
 > This is a warning containing some **very** important message.
+
+## DocFX tips
+
+### Enable search
+
+To enable search in DocFX it's not enough to set the configuration parameter to `true`:
+
+```json
+"globalMetadata": {
+    "_enableSearch": "true"
+}
+```
+
+You also have to indicate in the `docfx.json` the post processor that generates the index for the searches:
+
+```json
+"postProcessors": ["ExtractSearchIndex"],
+```
diff --git a/material/styles/main.css b/material/styles/main.css
index 392951f..9174371 100644
--- a/material/styles/main.css
+++ b/material/styles/main.css
@@ -1,9 +1,11 @@
 /* COLOR VARIABLES*/
 :root {
-  --primary-color: #0d47a1;
-  --primary-light: #5e92f3;
-  --primary-dark: #003c8f;
+  --header-bg-color: #0d47a1;
+  --header-ft-color: #fff;
+  --highlight-light: #5e92f3;
+  --highlight-dark: #003c8f;
   --font-color: #34393e;
+  --custom-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
 }
 
 body {
@@ -20,7 +22,7 @@ body {
 
 button,
 a {
-  color: var(--primary-dark);
+  color: var(--highlight-dark);
   cursor: pointer;
 }
 
@@ -28,22 +30,22 @@ button:hover,
 button:focus,
 a:hover,
 a:focus {
-  color: var(--primary-light);
+  color: var(--highlight-light);
   text-decoration: none;
 }
 
 .toc .nav > li.active > a {
-  color: var(--primary-dark);
+  color: var(--highlight-dark);
 }
 
 .toc .nav > li.active > a:hover,
 .toc .nav > li.active > a:focus {
-  color: var(--primary-light);
+  color: var(--highlight-light);
 }
 
 .pagination > .active > a {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
+  background-color: var(--header-bg-color);
+  border-color: var(--header-bg-color);
 }
 
 .pagination > .active > a,
@@ -52,8 +54,8 @@ a:focus {
 .pagination > .active > span,
 .pagination > .active > span:focus,
 .pagination > .active > span:hover {
-  background-color: var(--primary-light);
-  border-color: var(--primary-light);
+  background-color: var(--highlight-light);
+  border-color: var(--highlight-light);
 }
 
 /* HEADINGS */
@@ -96,15 +98,15 @@ article h4 {
 /* NAVBAR */
 
 .navbar-brand > img {
-  color: #fff;
+  color: var(--header-ft-color);
 }
 
 .navbar {
   border: none;
   /* Both navbars use box-shadow */
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
-  -moz-box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
-  box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
+  -webkit-box-shadow: var(--custom-box-shadow);
+  -moz-box-shadow: var(--custom-box-shadow);
+  box-shadow: var(--custom-box-shadow);
 }
 
 .subnav {
@@ -113,30 +115,30 @@ article h4 {
 }
 
 .navbar-inverse {
-  background-color: var(--primary-color);
+  background-color: var(--header-bg-color);
   z-index: 100;
 }
 
 .navbar-inverse .navbar-nav > li > a,
 .navbar-inverse .navbar-text {
-  color: #fff;
-  background-color: var(--primary-color);
+  color: var(--header-ft-color);
+  background-color: var(--header-bg-color);
   border-bottom: 3px solid transparent;
   padding-bottom: 12px;
 }
 
 .navbar-inverse .navbar-nav > li > a:focus,
 .navbar-inverse .navbar-nav > li > a:hover {
-  color: #fff;
-  background-color: var(--primary-color);
+  color: var(--header-ft-color);
+  background-color: var(--header-bg-color);
   border-bottom: 3px solid white;
 }
 
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:focus,
 .navbar-inverse .navbar-nav > .active > a:hover {
-  color: #fff;
-  background-color: var(--primary-color);
+  color: var(--header-ft-color);
+  background-color: var(--header-bg-color);
   border-bottom: 3px solid white;
 }
 
@@ -198,7 +200,7 @@ article h4 {
   color: inherit;
   background-color: inherit;
   border: none;
-  box-shadow: 0px 2px 2px 0px rgba(100, 100, 100, 0.4);
+  box-shadow: var(--custom-box-shadow);
 }
 
 .alert > p {
@@ -246,5 +248,6 @@ pre {
   word-wrap: break-word;
   background-color: #fffaef;
   border-radius: 4px;
-  box-shadow: 0px 1px 4px 1px rgba(100, 100, 100, 0.4);
+  border: none;
+  box-shadow: var(--custom-box-shadow);
 }