diff --git a/README.md b/README.md
index 02b5d5e..b6516c1 100644
--- a/README.md
+++ b/README.md
@@ -20,4 +20,17 @@ The colors were chosen using <https://material.io/tools/color>.
             "templates/material"
         ],
     }
-    ```
\ No newline at end of file
+    ```
+
+## Color customization
+
+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
+:root {
+  --primary-color: #1565c0; /* Header color */
+  --primary-light: #5e92f3; /* Link color */
+  --primary-dark: #003c8f; /* Link:hover color */
+}
+```
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index d899dc4..1b17ebc 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Version 0.3.0 - December 2nd 2019
+
+- Added easy customization of header and link colors.
+
 ## Version 0.2.0 - February 1st 2019
 
 - Added material theme for the `note|warning|caution` blockquotes.
diff --git a/docs/index.md b/docs/index.md
index 521599f..cf85215 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,6 +22,19 @@ The colors were chosen using <https://material.io/tools/color>.
     }
     ```
 
+## Color customization
+
+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
+:root {
+  --primary-color: #1565c0; /* Header color */
+  --primary-light: #5e92f3; /* Link color */
+  --primary-dark: #003c8f; /* Link:hover color */
+}
+```
+
 ## Markdown extras
 
 For more reference about markdown support in DocFX check the
diff --git a/material/styles/main.css b/material/styles/main.css
index c64cc7f..392951f 100644
--- a/material/styles/main.css
+++ b/material/styles/main.css
@@ -1,202 +1,250 @@
+/* COLOR VARIABLES*/
+:root {
+  --primary-color: #0d47a1;
+  --primary-light: #5e92f3;
+  --primary-dark: #003c8f;
+  --font-color: #34393e;
+}
+
 body {
-    color: #34393e;
-    font-family: 'Roboto', sans-serif;
-    line-height: 1.5;
-    font-size: 16px;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    word-wrap: break-word
+  color: var(--font-color);
+  font-family: "Roboto", sans-serif;
+  line-height: 1.5;
+  font-size: 16px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-wrap: break-word;
+}
+
+/* HIGHLIGHT COLOR */
+
+button,
+a {
+  color: var(--primary-dark);
+  cursor: pointer;
+}
+
+button:hover,
+button:focus,
+a:hover,
+a:focus {
+  color: var(--primary-light);
+  text-decoration: none;
+}
+
+.toc .nav > li.active > a {
+  color: var(--primary-dark);
+}
+
+.toc .nav > li.active > a:hover,
+.toc .nav > li.active > a:focus {
+  color: var(--primary-light);
+}
+
+.pagination > .active > a {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+  background-color: var(--primary-light);
+  border-color: var(--primary-light);
 }
 
 /* HEADINGS */
 
 h1 {
-    font-weight: 600;
-    font-size: 32px;
+  font-weight: 600;
+  font-size: 32px;
 }
 
 h2 {
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 1.8;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 1.8;
 }
 
 h3 {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 1.8;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.8;
 }
 
 h5 {
-    font-size: 14px;
-    padding: 10px 0px;
+  font-size: 14px;
+  padding: 10px 0px;
 }
 
 article h1,
 article h2,
 article h3,
 article h4 {
-    margin-top: 35px;
-    margin-bottom: 15px;
+  margin-top: 35px;
+  margin-bottom: 15px;
 }
 
 article h4 {
-    padding-bottom: 8px;
-    border-bottom: 2px solid #ddd;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #ddd;
 }
 
 /* NAVBAR */
 
-.navbar-brand>img {
-    color: #fff;
+.navbar-brand > img {
+  color: #fff;
 }
 
 .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);
+  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);
 }
 
 .subnav {
-    border-top: 1px solid #ddd;
-    background-color: #fff;
+  border-top: 1px solid #ddd;
+  background-color: #fff;
 }
 
 .navbar-inverse {
-    background-color: #0d47a1;
-    z-index: 100;
+  background-color: var(--primary-color);
+  z-index: 100;
 }
 
-.navbar-inverse .navbar-nav>li>a,
+.navbar-inverse .navbar-nav > li > a,
 .navbar-inverse .navbar-text {
-    color: #fff;
-    background-color: #0d47a1;
-    border-bottom: 3px solid transparent;
-    padding-bottom: 12px;
+  color: #fff;
+  background-color: var(--primary-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: #0d47a1;
-    border-bottom: 3px solid white;
+.navbar-inverse .navbar-nav > li > a:focus,
+.navbar-inverse .navbar-nav > li > a:hover {
+  color: #fff;
+  background-color: var(--primary-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: #0d47a1;
-    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);
+  border-bottom: 3px solid white;
 }
 
 .navbar-form .form-control {
-    border: none;
-    border-radius: 20px;
+  border: none;
+  border-radius: 20px;
 }
 
 /* SIDEBAR */
 
-.toc .level1>li {
-    font-weight: 400;
+.toc .level1 > li {
+  font-weight: 400;
 }
 
-.toc .nav>li>a {
-    color: #34393e;
+.toc .nav > li > a {
+  color: var(--font-color);
 }
 
 .sidefilter {
-    background-color: #fff;
-    border-left: none;
-    border-right: none;
+  background-color: #fff;
+  border-left: none;
+  border-right: none;
 }
 
 .sidefilter {
-    background-color: #fff;
-    border-left: none;
-    border-right: none;
+  background-color: #fff;
+  border-left: none;
+  border-right: none;
 }
 
 .toc-filter {
-    padding: 10px;
-    margin: 0;
+  padding: 10px;
+  margin: 0;
 }
 
-.toc-filter>input {
-    border: 2px solid #ddd;
-    border-radius: 20px;
+.toc-filter > input {
+  border: 2px solid #ddd;
+  border-radius: 20px;
 }
 
-.toc-filter>.filter-icon {
-    display: none;
+.toc-filter > .filter-icon {
+  display: none;
 }
 
-.sidetoc>.toc {
-    background-color: #fff;
-    overflow-x: hidden;
+.sidetoc > .toc {
+  background-color: #fff;
+  overflow-x: hidden;
 }
 
 .sidetoc {
-    background-color: #fff;
-    border: none;
+  background-color: #fff;
+  border: none;
 }
 
 /* ALERTS */
 
 .alert {
-    padding: 0px 0px 5px 0px;
-    color: inherit;
-    background-color: inherit;
-    border: none;
-    box-shadow: 0px 2px 2px 0px rgba(100, 100, 100, 0.4);
+  padding: 0px 0px 5px 0px;
+  color: inherit;
+  background-color: inherit;
+  border: none;
+  box-shadow: 0px 2px 2px 0px rgba(100, 100, 100, 0.4);
 }
 
-.alert>p {
-    margin-bottom: 0;
-    padding: 5px 10px;
+.alert > p {
+  margin-bottom: 0;
+  padding: 5px 10px;
 }
 
-.alert>ul {
-    margin-bottom: 0;
-    padding: 5px 40px;
+.alert > ul {
+  margin-bottom: 0;
+  padding: 5px 40px;
 }
 
-.alert>h5 {
-    padding: 10px 15px;
-    margin-top: 0;
-    text-transform: uppercase;
-    font-weight: bold;
-    border-radius: 4px 4px 0 0;
+.alert > h5 {
+  padding: 10px 15px;
+  margin-top: 0;
+  text-transform: uppercase;
+  font-weight: bold;
+  border-radius: 4px 4px 0 0;
 }
 
-.alert-info>h5 {
-    color: #1976d2;
-    border-bottom: 4px solid #1976d2;
-    background-color: #e3f2fd;
+.alert-info > h5 {
+  color: #1976d2;
+  border-bottom: 4px solid #1976d2;
+  background-color: #e3f2fd;
 }
 
-.alert-warning>h5 {
-    color: #f57f17;
-    border-bottom: 4px solid #f57f17;
-    background-color: #fff3e0;
+.alert-warning > h5 {
+  color: #f57f17;
+  border-bottom: 4px solid #f57f17;
+  background-color: #fff3e0;
 }
 
-.alert-danger>h5 {
-    color: #d32f2f;
-    border-bottom: 4px solid #d32f2f;
-    background-color: #ffebee;
+.alert-danger > h5 {
+  color: #d32f2f;
+  border-bottom: 4px solid #d32f2f;
+  background-color: #ffebee;
 }
 
 /* CODE HIGHLIGHT */
 pre {
-	padding: 9.5px;
-	margin: 0 0 10px;
-	font-size: 13px;
-	word-break: break-all;
-	word-wrap: break-word;
-	background-color: #fffaef;
-	border-radius: 4px;
-	box-shadow: 0px 1px 4px 1px rgba(100, 100, 100, 0.4);
-}
\ No newline at end of file
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #fffaef;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px 1px rgba(100, 100, 100, 0.4);
+}