diff --git a/styles/main.css b/styles/main.css
index c88a116..4162a70 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,11 +1,21 @@
 /* Our default values set as CSS variables */
 :root {
-  --color-bg: #f0f0f0;
+  color-scheme: light dark;
+  
+  --color-bg-light: #f0f0f0;
+  --color-text-light: #640054;
+  --color-header-light: #185370;
+  
+  --color-bg-dark: #1f1f1f; 
+  --color-text-dark: #4fcdfe;
+  --color-header-dark: #ff87f3;
+  
+  --color-bg-wip: #ffbc0a;
+  --color-text-wip: #640054;
+  
   --color-text-main: #640054;
   --color-text-header: #185370;
-  --color-warn: #FBCC0A;
   --font-family: "HK Grotesk";
-  --font-family-header: "HK Grotesk";
 }
 
 /* Basic page style resets */
@@ -37,8 +47,8 @@
   display: flex;
   flex-flow: row wrap;
   align-items: stretch;
-  background: var(--color-bg);
-  border-bottom: 4px solid var(--color-text-header);
+  background: light-dark(var(--color-bg-light), var(--color-bg-dark));
+  border-bottom: 4px solid light-dark(var(--color-header-light), var(--color-header-dark));
   justify-content: center;
 }
 
@@ -54,7 +64,7 @@
   padding: 1rem 0 0.75rem 0;
   width: 100%;
   flex-wrap: wrap;
-  border-top: 4px solid var(--color-text-header);
+  border-top: 4px solid light-dark(var(--color-header-light), var(--color-header-dark));
 }
 
 .divider {
@@ -63,12 +73,12 @@
 
 /* WIP banner */
 .wip {
-  background-color: var(--color-warn);
-  color: var(--color-text-main);
+  background-color: var(--color-bg-wip);
+  color: var(--color-text-wip);
   font-family: var(--font-family);
   padding: 0.05rem 1rem;
   width: 100%;
-  border: solid var(--color-text-header);
+  border: solid light-dark(var(--color-header-light), var(--color-header-dark));
   border-radius: 3px;
   margin-top: 1rem;
   text-align: center;
@@ -76,8 +86,8 @@
 
 /* Body */
 body {
-  font-family: HK Grotesk;
-  background-color: var(--color-bg);
+  font-family: var(--font-family);
+  background-color: light-dark(var(--color-bg-light), var(--color-bg-dark));
   color: var(--color-text-main);
 }
 
@@ -85,7 +95,7 @@ body {
 a:link,
 a:visited {
   background-color: var(--color-text-main);
-  color: var(--color-bg);
+  color: light-dark(var(--color-bg-light), var(--color-bg-dark));
   font-weight: bold;
   padding: 0 .2rem;
   text-decoration: none;
@@ -119,7 +129,7 @@ img {
 
 /* Headings */
 h1, h2, h3 {
-  color: var(--color-text-header);
+  color: light-dark(var(--color-header-light), var(--color-header-dark));
   font-weight: bold;
   line-height: 105%;
 }