diff --git a/public/css/HomePage.css b/public/css/HomePage.css
index 7dd2260e..3627e935 100644
--- a/public/css/HomePage.css
+++ b/public/css/HomePage.css
@@ -1,4 +1,45 @@
+:root {
+  color-scheme: light dark;
+
+  /* these are the light colors */
+  --background: #eee;
+
+  --code-background: #ccc;
+  --link: #045b88;
+
+  --panel-color: #000;
+  --panel-background: #ddd;
+  --panel-emphasis: rgb(20, 62, 84);
+
+  --tooltip-background: #eee;
+  --tooltip-border: rgba(0, 0, 0, 0.1);
+
+  --source-tab-color: white;
+  --source-tab-background: #444;
+  --source-tab-active-background: #282828;
+  --source-tab-active-shadow: rgb(167, 167, 167);
+
+  --iframe-color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* these are the dark colors */
+    --background: #000;
+
+    --code-background: #555;
+    --link: #02abff;
+
+    --panel-color: #02abff;
+    --panel-background: #222;
+    --panel-emphasis: rgb(115, 206, 255);
+
+    --tooltip-background: #111;
+    --tooltip-border: rgba(255, 255, 255, 0.1);
+
+  --iframe-color-scheme: light;
+  }
+}
+
 .homePage {
-  background: white;
-  color: #222;
 }
diff --git a/public/css/MainLayout.css b/public/css/MainLayout.css
index 2c65261f..04953f47 100644
--- a/public/css/MainLayout.css
+++ b/public/css/MainLayout.css
@@ -12,9 +12,10 @@
   flex: 1 0 auto;
   max-width: 300px;
   height: 100%;
-  background: #fafafa;
   overflow-y: auto;
   position: relative;
+  color: var(--panel-color);
+  background-color: var(--panel-background);
 }
 
 .exampleList {
@@ -24,7 +25,13 @@
 }
 
 .exampleList h3 {
-  color: rgb(43, 126, 171);
+  color: var(--panel-emphasis);
+}
+
+code {
+  background-color: var(--code-background);
+  border: 2px solid var(--code-background);
+  border-radius: 0.25em;
 }
 
 .exampleList li {
diff --git a/public/css/SampleLayout.css b/public/css/SampleLayout.css
index 9ec90d7f..d82675a2 100644
--- a/public/css/SampleLayout.css
+++ b/public/css/SampleLayout.css
@@ -13,13 +13,15 @@
   height: 100%;
   border: none;
   display: block;
+  /* should should remain white because samples in iframes expect a white background */
+  color-scheme: light;
   background-color: #fff;
 }
 
 .sampleCategory {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+  position: relative;
 }
 
 [data-tooltip] {
@@ -29,8 +31,8 @@
 [data-tooltip]::after {
   pointer-events: none;
   content: attr(data-tooltip);
-  background-color: rgba(255, 255, 255, 1);
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  background-color: var(--tooltip-background);
+  box-shadow: 0 0 2px 2px var(--tooltip-border);
   border-radius: 10px;
   transition: opacity 0.2s ease-in, transform 0.2s ease-out;
   padding: 0.5em;
@@ -98,6 +100,7 @@ nav.sourceFileNav[data-right=true]::after {
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
 }
 
+/*
 nav.sourceFileNav div.sourceFileScrollContainer {
   white-space: nowrap;
   overflow-x: auto;
@@ -124,13 +127,14 @@ nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-thumb {
 nav.sourceFileNav div.sourceFileScrollContainer::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0);
 }
+*/
 
 nav.sourceFileNav li a {
   display: block;
   margin: 0;
   padding: 10px;
-  color: white;
-  background-color: #403e3e;
+  color: var(--source-tab-color);
+  background-color: var(--source-tab-background);
 }
 
 nav.sourceFileNav li:hover {
@@ -140,11 +144,11 @@ nav.sourceFileNav li:hover {
 }
 
 nav.sourceFileNav li a[data-active=true] {
-  background-color: #282823;
+  background-color: var(--source-tab-active-background);
 }
 
 nav.sourceFileNav li:has(a[data-active=true]) {
-  box-shadow: 0 -10px 0 0 rgb(167, 167, 167);
+  box-shadow: 0 -10px 0 0 var(--source-tab-active-shadow);
   border-radius: 10px;
 }
 
diff --git a/public/css/styles.css b/public/css/styles.css
index c96b0b41..0c2b4a4f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -2,7 +2,6 @@
 @import url('MainLayout.css');
 @import url('SampleLayout.css');
 
-
 * {
   box-sizing: border-box;
 }
@@ -10,6 +9,7 @@
 html, body {
   margin: 0;
   height: 100%;
+  background-color: var(--background);
 }
 
 body {
@@ -18,11 +18,7 @@ body {
 
 a {
   text-decoration: none;
-}
-
-a:link,
-a:visited {
-  color: #045b88;
+  color: var(--link)
 }
 
 a:hover {
@@ -34,8 +30,6 @@ main {
   flex-direction: column;
   position: relative;
   flex: 1;
-  background: black;
-  color: #ddd;
   padding-left: 15px;
   padding-right: 15px;
 }