diff --git a/assets/css/010_colors.css b/assets/css/010_colors.css
index 58e06ba..3728b29 100644
--- a/assets/css/010_colors.css
+++ b/assets/css/010_colors.css
@@ -22,29 +22,48 @@
   --lilac: rgb(187 121 245);
   --purple: rgb(197 141 244);
 
-  --background-color: var(--gray7);
-  --hr-color: var(--gray1);
-  --text-color: var(--text-color-primary);
-  --text-color-primary: var(--gray1);
-  --text-color-secondary: var(--gray4);
-  --text-color-light: var(--gray5);
+  color-scheme: light dark;
 }
-@media (prefers-color-scheme: dark) {
+
+@media screen and (prefers-color-scheme: light) {
   :root {
-    /* Reverse the grayscale ramp in dark mode. */
-    --gray7: rgb(17 19 28);
-    --gray6: rgb(28 32 48);
-    --gray5: rgb(53 59 82);
-    --gray4: rgb(86 96 121);
-    --gray3: rgb(139 144 164);
-    --gray2: rgb(206 207 214);
-    --gray1: rgb(255 253 249);
+    --background-color: var(--gray7);
+    --hr-color: var(--gray1);
+    --text-color-primary: var(--gray1);
+    --text-color-secondary: var(--gray4);
+    --text-color-light: var(--gray5);
   }
 }
 
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --background-color: var(--gray1);
+    --hr-color: var(--gray7);
+    --text-color-primary: var(--gray7);
+    --text-color-secondary: var(--gray5);
+    --text-color-light: var(--gray4);
+  }
+}
+
+:root {
+  --background-color: light-dark(var(--gray7), var(--gray1));
+  --hr-color: light-dark(var(--gray1), var(--gray7));
+  --text-color-primary: light-dark(var(--gray1), var(--gray7));
+  --text-color-secondary: light-dark(var(--gray4), var(--gray5));
+  --text-color-light: light-dark(var(--gray5), var(--gray4));
+}
+
+:root[color-scheme="dark"] {
+  color-scheme: only dark;
+}
+
+:root[color-scheme="light"] {
+  color-scheme: only light;
+}
+
 body {
   background-color: var(--background-color);
-  color: var(--text-color);
+  color: var(--text-color-primary);
 }
 
 hr {
diff --git a/assets/css/010_typography.css b/assets/css/010_typography.css
index 6d314ee..98933c7 100644
--- a/assets/css/010_typography.css
+++ b/assets/css/010_typography.css
@@ -92,7 +92,7 @@ sup {
 small,
 .text--small
 {
-  color: var(--gray4);
+  color: var(--text-color-secondary);
   font-weight: normal;
   font-size: var(--text-s);
   letter-spacing: 0.01em;
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 622ef6f..4682b12 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -18,7 +18,7 @@
 }
 
 figcaption {
-  color: var(--gray4);
+  color: var(--text-color-secondary);
   font-weight: normal;
   font-size: var(--text-xs);
   letter-spacing: 0.01em;
diff --git a/assets/css/050_quotations.css b/assets/css/050_quotations.css
index 00148a0..8154dac 100644
--- a/assets/css/050_quotations.css
+++ b/assets/css/050_quotations.css
@@ -11,7 +11,7 @@ blockquote {
   --border-width: var(--space-xs);
   --inline-padding: var(--space-l);
 
-  border-inline-start: var(--border-width) solid var(--gray4);
+  border-inline-start: var(--border-width) solid var(--text-color-light);
   margin-inline: 0 var(--inline-padding);
   padding-inline-start: calc(var(--inline-padding) - var(--border-width));
 }
diff --git a/assets/css/080_site_footer.css b/assets/css/080_site_footer.css
index b704b9c..5800439 100644
--- a/assets/css/080_site_footer.css
+++ b/assets/css/080_site_footer.css
@@ -8,7 +8,7 @@
  **************/
 
 .site-footer {
-  border-top: 2px dashed var(--gray6);
+  border-top: 2px dashed var(--text-color-light);
   color: var(--text-color-secondary);
   font-size: var(--text-s);
   grid-column: main-start / main-end;
diff --git a/assets/css/080_site_header.css b/assets/css/080_site_header.css
index 280774f..ad45a50 100644
--- a/assets/css/080_site_header.css
+++ b/assets/css/080_site_header.css
@@ -2,11 +2,10 @@
  # COMPONENT: SITE HEADER
  *************************/
 
-.site-header {
-  --color-nav-separator: var(--gray6);
-
-  font-family: var(--font-family-monospace);
-  margin-block: var(--space-m) var(--space-xl);
+@media (prefers-color-scheme: dark) {
+  .site-header {
+    --color-nav-separator: var(--gray6);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -15,14 +14,21 @@
   }
 }
 
+.site-header {
+  --color-nav-separator: light-dark(var(--gray6), var(--gray4));
+
+  font-family: var(--font-family-monospace);
+  margin-block: var(--space-m) var(--space-xl);
+}
+
 .site-header__content {
-  border-bottom: 2px dashed var(--gray6);
+  border-bottom: 2px dashed var(--color-nav-separator);
   gap: var(--space-l);
   grid-column: main-start / main-end;
   padding-bottom: var(--space-xs);
 
   .site-header__title {
-    color: var(--gray1);
+    color: var(--text-color-primary);
     font-size: var(--text-m);
     font-weight: normal;
     letter-spacing: 0.05em;
diff --git a/assets/css/099_content.css b/assets/css/099_content.css
index d6bf309..60db3cf 100644
--- a/assets/css/099_content.css
+++ b/assets/css/099_content.css
@@ -15,7 +15,6 @@
   .codeblock {
     color: var(--foreground);
     background-color: var(--background);
-    border: 1px solid var(--gray6);
     font-family: var(--font-family-monospace);
     grid-column: gutter-start / gutter-end;
     overflow: auto;
diff --git a/assets/css/099_page_header.css b/assets/css/099_page_header.css
index efeacc1..ff52630 100644
--- a/assets/css/099_page_header.css
+++ b/assets/css/099_page_header.css
@@ -26,7 +26,7 @@
   }
 
   .page-header__subtitle {
-    color: var(--gray3);
+    color: var(--text-color-secondary);
     font-size: var(--text-m);
   }