Claude's first pass...isn't great

Author: nicklemmon

src/components/long-form/long-form.module.css

@@ -37,7 +37,7 @@
   bottom: 0;
   width: var(--spacing-lg);
   height: var(--spacing-xs);
-  background-color: rgba(0, 0, 0, 0.125);
+  background-color: var(--semi-transparent-black);
 }
 
 .long-form p {
@@ -58,8 +58,8 @@
 }
 
 .long-form :not(pre) > code {
-  color: black;
-  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--outer-space);
+  background-color: var(--sea-shell);
   padding: 0.125rem 0.25rem;
   border-radius: 3px;
   font-size: 0.85rem;
@@ -81,7 +81,7 @@
   display: block;
   border-radius: var(--border-radius);
   padding: var(--spacing-md);
-  box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.33);
+  box-shadow: 0 1rem 1rem -1rem var(--shadow-color);
   overflow-x: auto;
 }
 

src/styles/global.css

@@ -84,7 +84,7 @@ h6 {
 
 pre,
 code {
-  color: #fff;
+  color: var(--white);
 }
 
 iframe {

src/styles/variables.css

@@ -9,6 +9,7 @@
   --outer-space: #293038;
   --sea-shell: #f1f1f1;
   --semi-transparent-black: rgba(0, 0, 0, 0.125);
+  --shadow-color: rgba(0, 0, 0, 0.33);
   --boulder: #575757;
   --white: #fff;
 
@@ -41,3 +42,15 @@
   --header-height: 3rem;
   --border-radius: 6px;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Remap colors for dark mode */
+    --outer-space: #e8e8e8;
+    --sea-shell: #1a1a1a;
+    --white: #0d0d0d;
+    --boulder: #a8a8a8;
+    --semi-transparent-black: rgba(255, 255, 255, 0.125);
+    --shadow-color: rgba(0, 0, 0, 0.66);
+  }
+}