From ab3486d0e8f76fdc180753867e9476226e0e74ea Mon Sep 17 00:00:00 2001
From: "Henner M. Kruse" <hmk@hmkruse.de>
Date: Sun, 31 May 2020 22:02:32 +0200
Subject: [PATCH] Added dark mode

---
 static/css/site.css | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/static/css/site.css b/static/css/site.css
index ebc590a..afafcf0 100644
--- a/static/css/site.css
+++ b/static/css/site.css
@@ -40,9 +40,28 @@
     url('../fonts/LM-bold-italic.ttf') format('truetype');
 }
 
+:root {
+  --main-bg-color: hsl(210, 20%, 98%);
+  --main-text-color: hsl(0, 5%, 10%);
+  --main-link-color: hsl(0, 100%, 35%);
+  --table-border-color: hsl(0, 0%, 85%);
+  --table-head-border-color: hsl(0, 0%, 70%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-bg-color: hsl(0, 5%, 10%);
+    --main-text-color: hsl(210, 20%, 98%);
+    --main-link-color: hsl(0, 100%, 65%);
+    --table-border-color: hsl(0, 0%, 15%);
+    --table-head-border-color: hsl(0, 0%, 30%);
+  }
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
+
 body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, dl, dd {
   margin: 0;
 }
@@ -67,8 +86,8 @@ body {
   overflow-x: hidden;
   margin: 0 auto;
   padding: 2rem 1.25rem;
-  color: hsl(0, 5%, 10%);
-  background-color: hsl(210, 20%, 98%);
+  color: var(--main-text-color);
+  background-color: var(--main-bg-color);
   text-rendering: optimizeLegibility;
 }
 
@@ -83,7 +102,7 @@ a:not([class]) {
 }
 
 a, a:visited {
-  color: #a00;
+  color: var(--main-link-color);
 }
 
 a:focus {
@@ -224,7 +243,7 @@ footer.post-info {
 .entry-content a:after {
   content: '[' counter(entrylinks) ']';
   margin-left: 2px;
-  color: #a00;
+  color: var(--main-link-color);
   cursor: pointer;
   pointer-events: auto;
 }
@@ -296,7 +315,7 @@ footer.post-info {
 }
 
 .entry-content td {
-  border-bottom: 1px solid hsl(0, 0%, 85%);
+  border-bottom: 1px solid var(--table-border-color);
 }
 
 .entry-content th:not([align]), td:not([align]) {
@@ -305,23 +324,23 @@ footer.post-info {
 
 .entry-content th:empty,
 .entry-content td:empty {
-  border-left: 1px solid hsl(0, 0%, 85%);
+  border-left: 1px solid var(--table-border-color);
   width: 0;
   padding: 0;
 }
 
 .entry-content th:empty~th:empty,
 .entry-content td:empty~td:empty {
-  border-left: 1px double hsl(0, 0%, 85%);
+  border-left: 1px double var(--table-border-color);
 }
   
 
 .entry-content thead th {
-  border-bottom: 2px solid hsl(0, 0%, 70%);
+  border-bottom: 2px solid var(--table-head-border-color);
 }
 
 .entry-content tfoot th {
-  border-top: 2px solid hsl(0, 0%, 70%);
+  border-top: 2px solid var(--table-head-border-color);
 }
 
 /*