diff --git a/content/_index.md b/content/_index.md
index 9c11e87..2783f30 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -68,8 +68,9 @@ Credits
 -------
 
 * [RSS feed icon](http://www.feedicons.com/) by The Mozilla Foundation.
-* Website theme based on [Juice](https://github.com/huhu/juice) by HuHu.
+* Website theme based on [Juice](https://github.com/huhu/juice) by HuHu with colours by [Di].
 * [Fira Sans](https://github.com/hellogreg/firava) variable font by Mozilla and Greg Gibson.
 
 [selectors]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
 [ssheven]: https://github.com/cy384/ssheven
+[Di]: https://didoesdigital.com/
diff --git a/static/home.css b/static/home.css
index 5cd174c..ee7ab47 100644
--- a/static/home.css
+++ b/static/home.css
@@ -26,11 +26,11 @@ a.link-button {
   line-height: 30px;
   text-decoration: none;
   font-weight: 550;
-  color: white;
-  background: cornflowerblue;
+  color: var(--button-text-color);
+  background: var(--button-color);
 }
 a.link-button:hover {
-  background: hsl(218.5, 79.2%, 50%);
+  background: var(--button-hover-color);
   text-decoration: none;
 }
 a.install-button {
@@ -64,6 +64,24 @@ p {
   margin: 0.5em 0;
 }
 
+footer {
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+}
+footer a,
+footer a:hover {
+  color: var(--footer-text-color);
+}
+
+.content.text {
+  color: var(--content-text-color);
+}
+
+.content.text h2,
+.content.text .heading-text {
+  color: var(--content-heading-text-color);
+}
+
 .logo {
   font-family: var(--header-font-family), sans-serif;
   font-weight: 900;
diff --git a/templates/_variables.html b/templates/_variables.html
index 9f420d9..c94fc61 100644
--- a/templates/_variables.html
+++ b/templates/_variables.html
@@ -1,18 +1,18 @@
 <style>
     :root {
         /* Primary theme color */
-        --primary-color: #DDFFFC;
+        --primary-color: #50BDB6;
         /* Primary theme text color */
-        --primary-text-color: #4f4442;
-        --primary-text-color-over: #000;
+        --primary-text-color: #0C4A4C;
+        --primary-text-color-over: #282B2B;
         /* Primary theme link color */
-        --primary-link-color: #d46e13;;
+        --primary-link-color: #1F827B;
         /* Secondary color: the background body color */
-        --secondary-color: #fcfaf6;
-        --secondary-text-color: #303030;
+        --secondary-color: #fff;
+        --secondary-text-color: #1F827B;
         /* Highlight text color of table of content */
-        --toc-highlight-text-color: #d46e13;
-        --toc-background-color: white;
+        --toc-highlight-text-color: #282B2B;
+        --toc-background-color: #fff;
         --code-color: initial;
         --code-background-color: initial;
         --shadow-color: #ddd;
@@ -20,5 +20,12 @@
         --header-font-family: Firava, "Fira Sans", sans-serif;
         /* Font used for text */
         --text-font-family: Firava, "Fira Sans", sans-serif;
+        --button-color: #000;
+        --button-hover-color: #282B2B;
+        --button-text-color: #fff;
+        --content-text-color: #282B2B;
+        --content-heading-text-color: #282B2B;
+        --footer-background-color: #FACD69;
+        --footer-text-color: #282B2B;
     }
 </style>
diff --git a/templates/index.html b/templates/index.html
index 1b5fefe..2bed9aa 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,7 +26,7 @@
 {% endblock hero %}
 
 {% block head %}
-    <link rel="stylesheet" href="{{ get_url(path="home.css") }}">
+    <link rel="stylesheet" href="{{ get_url(path="home.css") }}?v=2">
     <link rel="stylesheet" href="{{ get_url(path="syntax.css") }}">
     <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="index.xml", trailing_slash=false) }}">
 {% endblock %}