From 395d0bdc6977e699e2f9d9276c9a8fe342cbd99e Mon Sep 17 00:00:00 2001
From: Stefan Kreutz <mail@skreutz.com>
Date: Sat, 11 Sep 2021 11:35:45 +0200
Subject: Add dark theme

Thereby change color space from rgb(a) to hsl to make lightness
explicit.
---
 css/site.css | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

(limited to 'css/site.css')

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 {
-- 
cgit v1.2.3