diff --git a/assets/base.scss b/assets/base.scss
index a0df87f6c..5a3a4532b 100644
--- a/assets/base.scss
+++ b/assets/base.scss
@@ -1,8 +1,8 @@
 :root {
   --lt-colours-light: var(--light) !important;
   --lt-colours-lightgray: var(--lightgray) !important;
-  --lt-colours-dark: var(--navy) !important;
-  --lt-colours-secondary: var(--olive) !important;
+  --lt-colours-dark: var(--secondary) !important;
+  --lt-colours-secondary: var(--tertiary) !important;
   --lt-colours-gray: var(--outlinegray) !important;
 }
 
@@ -23,10 +23,10 @@ a {
   font-size: 1em;
   text-decoration: none;
   transition: all 0.2s ease;
-  color: var(--navy);
+  color: var(--secondary);
 
   &:hover {
-    color: var(--olive) !important;
+    color: var(--tertiary) !important;
   }
 }
 
@@ -98,12 +98,12 @@ h3 {
 
 blockquote {
   margin-left: 0em;
-  border-left: 3px solid var(--navy);
+  border-left: 3px solid var(--secondary);
   padding-left: 1em;
   transition: border-color 0.2s ease;
 
   &:hover {
-    border-color: var(--olive);
+    border-color: var(--tertiary);
   }
 }
 
@@ -123,7 +123,7 @@ article a {
   font-family: Source Sans Pro;
   font-weight: 600;
   text-decoration: underline;
-  text-decoration-color: var(--olive);
+  text-decoration-color: var(--tertiary);
   text-decoration-thickness: .15em;
 }
 
@@ -169,7 +169,7 @@ footer {
 
   & > a {
     font-size: 1em;
-    color: var(--navy);
+    color: var(--secondary);
     padding: 0 0.5em 3em 0.5em;
   }
 }
diff --git a/assets/custom.scss b/assets/custom.scss
index 9fcccd3e5..cb8babb35 100644
--- a/assets/custom.scss
+++ b/assets/custom.scss
@@ -2,10 +2,10 @@
 :root {
   --light: #faf8f8;
   --dark: #141021;
-  --navy: #284b63;
-  --olive: #84a59d;
+  --secondary: #284b63;
+  --tertiary: #84a59d;
   --visited: #afbfc9;
-  --salmon: #f28482;
+  --primary: #f28482;
   --gray: #4e4e4e;
   --lightgray: #f0f0f0;
   --outlinegray: #dadada;
@@ -14,10 +14,10 @@
 [saved-theme="dark"] {
   --light: #1e1e21 !important;
   --dark: #fbfffe !important;
-  --navy: #5b778a !important;
+  --secondary: #5b778a !important;
   --visited: #4a575e !important;
-  --olive: #84a59d !important;
-  --salmon: #f58382 !important;
+  --tertiary: #84a59d !important;
+  --primary: #f58382 !important;
   --gray: #d4d4d4 !important;
   --lightgray: #292633 !important;
   --outlinegray: #343434 !important;
diff --git a/layouts/index.html b/layouts/index.html
index a68d61fbf..5dccbf90f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,6 +5,7 @@
 {{define "main"}}
 <!-- Main Page -->
 <div class="singlePage">
+    {{partial "darkmode.html" .}}
     {{.Content}}
 
     <!-- Contact Info -->
@@ -12,4 +13,10 @@
         {{partial "footer.html" .}}
     </div>
 </div>
+
+{{- with resources.Get "darkmode.js" | minify -}}
+<script>
+  {{.Content | safeJS }}
+</script>
+{{- end -}}
 {{end}}
\ No newline at end of file
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
index c315b8f85..81ea3f4b8 100644
--- a/layouts/partials/graph.html
+++ b/layouts/partials/graph.html
@@ -2,11 +2,11 @@
 <div id="graph-container"></div>
 <style>
     :root {
-        --g-node: {{.Site.Data.graphConfig.base.node}};
-        --g-node-active: {{.Site.Data.graphConfig.base.activeNode}};
-        --g-node-inactive: {{.Site.Data.graphConfig.base.inactiveNode}};
-        --g-link: {{.Site.Data.graphConfig.base.link}};
-        --g-link-active: {{.Site.Data.graphConfig.base.activeLink}};
+        --g-node: var(--secondary);
+        --g-node-active: var(--primary);
+        --g-node-inactive: var(--visited);
+        --g-link: var(--outlinegray);
+        --g-link-active: #5a7282;
     }
 </style>
 <script>