From 97c6d25a67e38a2394e0b9804e25a4188d299e61 Mon Sep 17 00:00:00 2001
From: Alexander Haase <ahaase@alexhaase.de>
Date: Sun, 18 Oct 2020 21:12:08 +0200
Subject: [PATCH] Add dark mode

If the client uses a dark color-scheme, the CSS will switch to a dark
color scheme as well.
---
 layout/less/body.less | 13 +++++++++++++
 layout/less/list.less | 14 ++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/layout/less/body.less b/layout/less/body.less
index 5a301f8..8bcf57a 100644
--- a/layout/less/body.less
+++ b/layout/less/body.less
@@ -32,3 +32,16 @@ body {
      * the content and the footer. */
     padding-bottom: @footer-height;
 }
+
+/* If the client prefers a dark color scheme, the following classes will be
+ * applied to give the site a dark look and feel.
+ *
+ * NOTE: These classes need to be at the end of this file, as they override the
+ *       default settings previously defined, if the dark color scheme is
+ *       requested. */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: @gray-800;
+        color:            white;
+    }
+}
diff --git a/layout/less/list.less b/layout/less/list.less
index 9490a71..fd6e631 100644
--- a/layout/less/list.less
+++ b/layout/less/list.less
@@ -49,3 +49,17 @@
         white-space: normal;
     }
 }
+
+/* If the client prefers a dark color scheme, the following classes will be
+ * applied to give the site a dark look and feel.
+ *
+ * NOTE: These classes need to be at the end of this file, as they override the
+ *       default settings previously defined, if the dark color scheme is
+ *       requested. */
+@media (prefers-color-scheme: dark) {
+    a,
+    a:hover,
+    a:focus {
+        color: @black;
+    }
+}