[css] color preference light/dark

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 _site/
+scratch.md

css/style.css

@@ -15,6 +15,7 @@
   --color-border: #e0e0e0;
   --color-link: #1a1a1a;
   --color-link-hover: #555;
+  --color-pre-bg: #f5f5f5;
   --max-width: 960px;
   --sidebar-width: 200px;
 }
@@ -135,7 +136,7 @@ a:hover {
 }
 
 .column-body pre {
-  background: #f5f5f5;
+  background: var(--color-pre-bg);
   padding: 1rem;
   overflow-x: auto;
   margin-bottom: 1rem;
@@ -217,6 +218,20 @@ a:hover {
   color: var(--color-text);
 }
 
+/* dark mode */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #1a1a1a;
+    --color-text: #e0e0e0;
+    --color-muted: #999;
+    --color-border: #333;
+    --color-link: #e0e0e0;
+    --color-link-hover: #bbb;
+    --color-pre-bg: #2a2a2a;
+  }
+}
+
 /* responsive */
 
 @media (max-width: 640px) {