From c6147293f67ef9ca506255a412ce00b63f9e5657 Mon Sep 17 00:00:00 2001
From: Joshua Ramon Enslin <joshua@museum-digital.de>
Date: Tue, 7 Jan 2020 10:07:26 +0100
Subject: [PATCH] Add dark mode

phpcs-errors:253 phpunit-status:successful
---
 assets/css/csvxml.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/assets/css/csvxml.css b/assets/css/csvxml.css
index 2ffaeea..f0ed307 100644
--- a/assets/css/csvxml.css
+++ b/assets/css/csvxml.css
@@ -100,3 +100,43 @@ ul.fieldList > li.humanTLToggled { border-color: #CB9B8C; background: #CB9B8C; b
 .actionList { margin: 1em 0 1em 1em; padding: .5em 0; }
 .actionList > li a { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; }
 .actionList > li a:hover { background: #CB9B8C; }
+
+/* =============
+|  Dark mode
+|============ */
+
+@media (prefers-color-scheme: dark) {
+    body { background: #263238; color: #ECEFF1; }
+    input, select, textarea { background: inherit; color: inherit; border: 3px solid #37474F; transition: border .4s, box-shadow .4s; }
+    a.buttonLike:focus,
+    .options > a.buttonLike:focus,
+    button:focus,
+    select:focus,
+    textarea:focus,
+    input:focus,
+    textarea:active,
+    input:active,
+    a.buttonLike:hover,
+    .options > a.buttonLike:hover,
+    ul.fieldList > li:hover,
+    button:hover,
+    select:hover,
+    textarea:hover,
+    input:hover { background: inherit; border-color: #FFF; box-shadow: initial; border-radius: .2em; }
+    ul.fieldList > li,
+    .options > a.buttonLike,
+    a.buttonLike, button, input[type="submit"] { background: inherit; color: #FFF; border: 3px solid #FFC107; border-radius: .2em; transition: background .4s, color .4s, border .4s; }
+    ul.fieldList > li { border-color: #37474F; }
+    ul.fieldList > li.humanTLToggled,
+    .options > a.buttonLike:hover,
+    a.buttonLike:hover, button:hover { background: #FFC107; color: #000; border-color: #FFA000; }
+
+    a { color: #CFD8DC; }
+
+    .tiles > section h2 { background: #37474F; color: inherit; }
+    .tiles > section:hover h2 { background: rgba(0,0,0,.2); color: inherit; }
+
+    h1, h1 > * { color: #CFD8DC; }
+    body > div.uploader { background: inherit; border-color: #37474F; }
+
+}