diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css
index 7ca6cfa..ed15896 100755
--- a/_site/assets/css/styles.css
+++ b/_site/assets/css/styles.css
@@ -58,6 +58,15 @@
   font-display: swap;
 }
 
+:root {
+  --body-bg: #9f9287;
+  --main-bg: #cdcac4; 
+  --menu-bg: #2b2623;
+  --foot-bg: #2b2623; 
+  --btn-col: #dba047; 
+  --btn-hov: #ae4e26;
+}
+
 * {
   font-family: Merriweather, Merriweather Sans; 
 }
@@ -81,7 +90,7 @@ body {
   margin-left: 10%;
   margin-right: 10%;
   padding: 10px;
-  background-color: #9f9287;
+  background-color: var(--body-bg);
 }
 
 .main h1, h2, h3 {
@@ -113,7 +122,7 @@ div.pfp {
 }
 
 div.main {
-  background-color: #cdcac4;
+  background-color: var(--main-bg);
   padding: 2em;
   border-radius: 10px;
   min-height: 500px;
@@ -136,7 +145,7 @@ div.main {
 
 div.menu {
   /* background: #ae4e26; */
-  background: #2b2623; 
+  background: var(--menu-bg); 
   padding: .5em;
   margin-bottom: 2em;
   overflow: hidden;
@@ -163,7 +172,7 @@ div.menu {
   margin-left: 1em;
   min-width: 100px;
   text-align: center;
-  background-color: #dba047;
+  background-color: var(--btn-col);
   display:inline-block;
   font-size: medium;
   border-radius: 10px;
@@ -172,7 +181,7 @@ div.menu {
 }
 
 .menu a:hover, .contact a:hover {
-  background-color: #ae4e26;
+  background-color: var(--btn-hov);
 }
 
 .main a {
@@ -192,7 +201,7 @@ div.contact {
   text-decoration: none;
   padding: .8em .8em;
   text-align: center;
-  background-color: #dba047;
+  background-color: var(--btn-col);
   display:grid;
   font-size: medium;
   border-radius: 10px;
@@ -205,7 +214,7 @@ div.contact {
 
 footer {
   /* background: #ae4e26; */
-  background: #2b2623; 
+  background: var(--foot-bg); 
   padding: 1em;
   margin-top: 2em;
   overflow: hidden;
@@ -321,4 +330,26 @@ div.desc {
   content: "";
   display: table;
   clear: both;
-}
\ No newline at end of file
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: #615953;
+    --main-bg: #2b2623; 
+    --menu-bg: #2b2623;
+    --foot-bg: #2b2623; 
+    --btn-hov: #dba047; 
+    --btn-col: #ae4e26;
+  }
+
+  p, h1, h2, h3, b {
+    color: white;
+  }
+
+  div.desc {
+    color: white;
+  }
+  div.gallery {
+    border: 5px double rgba(167, 47, 20, 1);
+  }
+}
diff --git a/_site/index.html b/_site/index.html
index 5eb5e1f..ca63e90 100755
--- a/_site/index.html
+++ b/_site/index.html
@@ -39,7 +39,7 @@
             
         <p>If you want to get in touch, look at the <a href="contact.html">contact</a> page! You can find me on plenty of websites or just send me an email – I am always happy to talk to new people!</p>
 
-        <p>This website is still very much a work-in-progress and it was last updated: 19 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p>
+        <p>This website is still very much a work-in-progress and it was last updated: 23 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p>
     </div>
 
     <footer>
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 7ca6cfa..ed15896 100755
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -58,6 +58,15 @@
   font-display: swap;
 }
 
+:root {
+  --body-bg: #9f9287;
+  --main-bg: #cdcac4; 
+  --menu-bg: #2b2623;
+  --foot-bg: #2b2623; 
+  --btn-col: #dba047; 
+  --btn-hov: #ae4e26;
+}
+
 * {
   font-family: Merriweather, Merriweather Sans; 
 }
@@ -81,7 +90,7 @@ body {
   margin-left: 10%;
   margin-right: 10%;
   padding: 10px;
-  background-color: #9f9287;
+  background-color: var(--body-bg);
 }
 
 .main h1, h2, h3 {
@@ -113,7 +122,7 @@ div.pfp {
 }
 
 div.main {
-  background-color: #cdcac4;
+  background-color: var(--main-bg);
   padding: 2em;
   border-radius: 10px;
   min-height: 500px;
@@ -136,7 +145,7 @@ div.main {
 
 div.menu {
   /* background: #ae4e26; */
-  background: #2b2623; 
+  background: var(--menu-bg); 
   padding: .5em;
   margin-bottom: 2em;
   overflow: hidden;
@@ -163,7 +172,7 @@ div.menu {
   margin-left: 1em;
   min-width: 100px;
   text-align: center;
-  background-color: #dba047;
+  background-color: var(--btn-col);
   display:inline-block;
   font-size: medium;
   border-radius: 10px;
@@ -172,7 +181,7 @@ div.menu {
 }
 
 .menu a:hover, .contact a:hover {
-  background-color: #ae4e26;
+  background-color: var(--btn-hov);
 }
 
 .main a {
@@ -192,7 +201,7 @@ div.contact {
   text-decoration: none;
   padding: .8em .8em;
   text-align: center;
-  background-color: #dba047;
+  background-color: var(--btn-col);
   display:grid;
   font-size: medium;
   border-radius: 10px;
@@ -205,7 +214,7 @@ div.contact {
 
 footer {
   /* background: #ae4e26; */
-  background: #2b2623; 
+  background: var(--foot-bg); 
   padding: 1em;
   margin-top: 2em;
   overflow: hidden;
@@ -321,4 +330,26 @@ div.desc {
   content: "";
   display: table;
   clear: both;
-}
\ No newline at end of file
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: #615953;
+    --main-bg: #2b2623; 
+    --menu-bg: #2b2623;
+    --foot-bg: #2b2623; 
+    --btn-hov: #dba047; 
+    --btn-col: #ae4e26;
+  }
+
+  p, h1, h2, h3, b {
+    color: white;
+  }
+
+  div.desc {
+    color: white;
+  }
+  div.gallery {
+    border: 5px double rgba(167, 47, 20, 1);
+  }
+}