Color schemes

1 files changed, 38 insertions, 17 deletions

diff --git a/static/style.css b/static/style.css
index 5c27bbc..d21bd32 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,27 +1,42 @@
-body {
-  margin: 0 1rem;
-  font-family: Helvetica, Arial, sans-serif;
+:root {
+  color-scheme: light dark;
+
+  --body-background: light-dark(
+    oklch(95% 0.01 250),
+    oklch(20% 0.01 250)
+  );
+
+  --text-color: light-dark(
+    oklch(5% 0.01 250),
+    oklch(90% 0.01 250)
+  );
 
-  --border-color: #d0d7de;
-  --shade-background: #eeeeee;
+  --border-color: light-dark(
+    oklch(85% 0.01 250),
+    oklch(40% 0.01 250)
+  );
+
+  --shade-background: light-dark(
+    oklch(90% 0.01 250),
+    oklch(30% 0.01 250)
+  );
+
+  --link-color: light-dark(
+    oklch(50% 0.15 250),
+    oklch(60% 0.15 250)
+  );
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #0d1117;
-    color: #e6edf3;
-    --border-color: #30363d;
-  }
-  a {
-    color: #4493f8;
-  }
-  .blob {
-    background: #161b22;
-  }
+body {
+  margin: 0 1rem;
+  font-family: Helvetica, Arial, sans-serif;
+  background: var(--body-background);
+  color: var(--text-color);
 }
 
 a {
   text-decoration: none;
+  color: var(--link-color);
 }
 
 body > header, .box {
@@ -57,6 +72,12 @@ footer {
   vertical-align: text-bottom;
 }
 
+@media (prefers-color-scheme: dark) {
+  .icon {
+    filter: brightness(0) invert(1);
+  }
+}
+
 .repo {
   margin-bottom: 1rem;
   font-size: 120%;