diff --git a/site/public/styles/global.css b/site/public/styles/global.css
index fca6650ee..85b6272db 100644
--- a/site/public/styles/global.css
+++ b/site/public/styles/global.css
@@ -2,6 +2,7 @@
   --font-size-base: 16px;
   --color-text: hsl(12, 5%, 4%);
   --color-border: hsl(17, 24%, 90%);
+  color-scheme: light dark;
 }
 
 html {
@@ -13,7 +14,7 @@ html {
 }
 
 body {
-  color: hsla(0, 0%, 0%, 0.8);
+  color: light-dark(hsla(0, 0%, 0%, 0.8), white);
   font-family: 'Source Sans Pro', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
   font-weight: 400;
   word-wrap: break-word;
@@ -44,7 +45,7 @@ h1 {
   text-rendering: optimizeLegibility;
   font-size: 2rem;
   line-height: 1.1;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.5));
 }
 h2 {
   margin-top: 1.5rem;
@@ -225,7 +226,7 @@ li > p {
 code {
   font-size: 0.85rem;
   line-height: 1.5rem;
-  background: rgba(0, 0, 0, 0.05);
+  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.2));
   padding: 0 0.25em;
   border-radius: 3px;
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -254,7 +255,7 @@ td:last-child {
   padding-right: 0;
 }
 a {
-  color: #007a3d;
+  color: light-dark(#007a3d, #00cd70);
 }
 
 nav {
diff --git a/site/src/components/component-name-matrix.css b/site/src/components/component-name-matrix.css
index 1806d16e6..c747ac13e 100644
--- a/site/src/components/component-name-matrix.css
+++ b/site/src/components/component-name-matrix.css
@@ -18,8 +18,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    background: white;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+    background: Canvas;
+    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
 }
 
 .component-name-matrix .cell {
@@ -30,16 +30,16 @@
     overflow: hidden;
     height: 2rem;
     line-height: 1.2;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 }
 .component-name-matrix .cell.found {
     background: rgba(0, 255, 0, 0.1);
-    color: rgb(0, 64, 0);
+    color: light-dark(rgb(0, 64, 0), rgb(0, 191, 0));
 }
 .component-name-matrix .cell.not-found {
     background: rgba(255, 0, 0, 0.1);
-    color: rgb(64, 0, 0);
+    color: light-dark(rgb(64, 0, 0), rgb(191, 0, 0));
 
 }
 .component-name-matrix a.cell {
diff --git a/site/src/components/component-name-matrix.jsx b/site/src/components/component-name-matrix.jsx
index f3aea4106..d6f5a7154 100644
--- a/site/src/components/component-name-matrix.jsx
+++ b/site/src/components/component-name-matrix.jsx
@@ -11,8 +11,9 @@ const SORT_NEXT = {
   MATCH_COUNT: SORT_OPTIONS.COMPONENT_NAME,
 }
 
-const ComponentNameMatrix = (props) => {
-  const [sort, setSort] = useState(SORT_OPTIONS.COMPONENT_NAME)
+function ComponentNameMatrix() {
+  // const [sort, setSort] = useState(SORT_OPTIONS.COMPONENT_NAME)
+  const [sort, setSort] = [SORT_OPTIONS.COMPONENT_NAME, () => {}]
 
   const getMatchName = (name) =>
     name
diff --git a/site/src/components/navigation/navigation-item.astro b/site/src/components/navigation/navigation-item.astro
index ce24a4e33..a844bfa34 100644
--- a/site/src/components/navigation/navigation-item.astro
+++ b/site/src/components/navigation/navigation-item.astro
@@ -42,7 +42,7 @@ const relVal = shouldPrefetch ? 'prefetch' : ''
 
   a[aria-current='page'] {
     border-left-color: #00a453;
-    background-color: #f2f2f2;
+    background-color: light-dark(#f2f2f2, #2d2c2c);
   }
 
 </style>
\ No newline at end of file
diff --git a/site/src/components/specimens.css b/site/src/components/specimens.css
index 73d6aec42..c1e24d6b7 100644
--- a/site/src/components/specimens.css
+++ b/site/src/components/specimens.css
@@ -28,7 +28,6 @@
   position: relative;
   padding: 4px 8px;
   min-width: 120px;
-  color: rgba(0, 0, 0, 0.5);
   border-top: 1px solid #ccc;
   font-size: 0.8rem;
 }
diff --git a/site/src/styles/research.css b/site/src/styles/research.css
index cbd57a536..cf6f6d542 100644
--- a/site/src/styles/research.css
+++ b/site/src/styles/research.css
@@ -5,14 +5,17 @@
 
 .true {
   background: #a3edac;
+  color: black;
 }
 
 table.research td:not(.true):not(.false) {
   background: #ffffca;
+  color: black;
 }
 
 table.nowrap-first-column td:nth-child(1):not(.false):not(.true) {
   background: initial;
+  color: initial;
 }
 
 /* Should be applied to a td/th 
diff --git a/site/src/styles/spec.css b/site/src/styles/spec.css
index bcccc1708..0c76cbc20 100644
--- a/site/src/styles/spec.css
+++ b/site/src/styles/spec.css
@@ -14,6 +14,7 @@ dd + dt {
 
 .question {
   background: #f7f781;
+  color: black;
   position: relative;
   display: flex;
   padding: 0.5em;