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;
+    }
+}