diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index be175ac577265907e5c20607ac7e728b1e2b6400..36ba26e8769f4a88183d32fa503713d9d6550984 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,6 +19,9 @@ licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"
 builtWith = true
 mainSections = ["post"]
 
+## Set custom theme color.
+# themeColor = "#fc2803"
+
   [[params.socialIcons]]
   icon = "fa-linkedin"
   title = "Linkedin"
diff --git a/layouts/partials/theme-color.html b/layouts/partials/theme-color.html
index 0f624af5a47693869821ebe6637ea7b76c1e0256..9e698956beb15c1215d18079887d3a14a5866e9d 100644
--- a/layouts/partials/theme-color.html
+++ b/layouts/partials/theme-color.html
@@ -8,6 +8,20 @@
     border-color: {{ . }};
   }
 
+  .pagination li a {
+    color: {{ . }};
+    border: 1px solid {{ . }};
+  }
+
+  .pagination li.active a {
+    background-color: {{ . }};
+  }
+
+  .pagination li a:hover {
+    background-color: {{ . }};
+    opacity: 0.75;
+  }
+
   footer a,
   .content a,
   .related-posts li a:hover {
diff --git a/static/css/hyde.css b/static/css/hyde.css
index 6ee3e65017b23a0f14990d48db50f09e3bdb816c..4f41617f5a4abf30efcda9e705f358aa4e746fa3 100644
--- a/static/css/hyde.css
+++ b/static/css/hyde.css
@@ -246,12 +246,13 @@ ul.posts {
 
 .pagination li a:hover {
   color: #fff;
-  background: rgba(67, 118, 122, 0.75);
+  background-color: #49757a;
+  opacity: 0.75;
 }
 
 .pagination li.active a {
   color: #fff;
-  background: #49757a;
+  background-color: #49757a;
 }
 
 .pagination li.disabled a {