diff --git a/_includes/components/nav-link.webc b/_includes/components/nav-link.webc
index d43d6a8..acc0d02 100644
--- a/_includes/components/nav-link.webc
+++ b/_includes/components/nav-link.webc
@@ -17,8 +17,8 @@ customElements.define('nav-link', NavLink)
 
 <style webc:scoped>
 :host {
-  --color-solid: #1e1e3cff;
-  --color-transparent: #1e1e3c33;
+  --color-solid: var(--primary-colour, pink);
+  --color-transparent: var(--primary-colour-25);
   display: flex;
   position: relative;
   color: var(--color-transparent);
diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
index 6709885..74a7c7d 100644
--- a/_includes/components/nav-primary.webc
+++ b/_includes/components/nav-primary.webc
@@ -73,7 +73,7 @@ nav-link[data-name="<~"] {
 }
 
 .audioToggle:hover {
-  color: #CECECE;
+  color: var(--primary-colour);
   cursor: pointer;
   transition: color ease-in-out 0.1s;
 }
@@ -101,7 +101,6 @@ nav-link[data-name="<~"] {
   }
 }
 
-
 #sub > ul {
   grid-row: 1 / span 1;
   grid-column: 1 / span 1;
diff --git a/assets/css/main.css b/assets/css/main.css
index 27e97aa..1f431c8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,13 +8,33 @@
 /* --> BASE STYLES <-- */
 :root {
   --page-margin-inline: 1em;
-  --neutral-900: #1e1e3cff;
-  --neutral-900-25: #1e1e3c33;
+  /* --neutral-900: #1e1e3cff; */
+  /* --neutral-900-25: #1e1e3c33; */
+  --neutral-900: #080c11ff;
+  --neutral-900-25: #080c1133;
+  --neutral-100: #c7c7c7ff;
+  --neutral-100-25: #c7c7c733;
+
+  --primary-colour: var(--netural-900);
+  --primary-colour-25: var(--netural-900-25);
+  --bg-colour: #fcfcfcff;
+  --bg-colour-25: #fcfcfc33;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-colour: var(--neutral-100);
+    --primary-colour-25: var(--neutral-100-25);
+    --bg-colour: var(--neutral-900);
+    --bg-colour-25: var(--neutral-900-25);
+  }
+}
+
+
 body {
   font-family: 'fira code', monospace;
-  color: #1e1e3cff;
+  color: var(--primary-colour);
+  background-color: var(--bg-colour);
 }
 
 p {
@@ -31,10 +51,10 @@ em {
 }
 
 a, a:visited {
-  color: #1e1e3cff;
+  color: var(--primary-colour);
   padding-bottom: 2px;
   text-decoration: none;
-  border-bottom: 1px #1e1e3c50 solid;
+  border-bottom: 1px var(--primary-colour) solid;
   transition: color ease 0.5s, border ease 0.2s;
 }
 
@@ -92,7 +112,7 @@ nav#toTop > span {
   display: block;
   opacity: 0.0;
   transform: translateY(-2em);
-  background-color: rgba(255,255,255,0.0);
+  background-color: var(--primary-colour);
   padding: 0.3em 0.5em 0.5em;
   border-radius: 1em;
   transition: transform ease 0.5s, opacity ease 1s, background-color ease 0.5s 0.5s;
@@ -133,7 +153,7 @@ nav#sub > ul > li:before {
 }
 
 nav#sub > ul > li:hover {
-  background: #d2d2d8;
+  background: var(--primary-colour-25);
   cursor: pointer;
 }