Add dark theme

Thereby change color space from rgb(a) to hsl to make lightness
explicit.

1 files changed, 17 insertions, 7 deletions

diff --git a/css/site.css b/css/site.css
index 5f2626a..a2ffb90 100644
--- a/css/site.css
+++ b/css/site.css
@@ -1,11 +1,21 @@
 :root {
-  --foreground-color: rgba(0, 0, 0, .8);
-  --background-color: rgb(255, 255, 255);
-  --link-color: rgb(33, 86, 165);
-  --accent-color: rgb(186, 57, 37);
-
-  --light-gray: rgba(0, 0, 0, .03);
-  --dark-gray: rgba(0, 0, 0, .3);
+  --foreground-color: hsl(0, 0%, 20%);
+  --background-color: hsl(0, 0%, 100%);
+  --link-color: hsl(216, 67%, 39%);
+  --accent-color: hsl(8, 67%, 44%);
+  --light-gray: hsl(0, 0%, 97%);
+  --dark-gray: hsl(0, 0%, 70%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-color: hsl(0, 0%, 100%);
+    --background-color: hsl(0, 0%, 20%);
+    --link-color: hsl(216, 67%, 55%);
+    --accent-color: hsl(8, 67%, 44%);
+    --light-gray: hsl(0, 0%, 25%);
+    --dark-gray: hsl(0, 0%, 50%);
+  }
 }
 
 html {