Improve dark mode design

Close #20

public/assets/css/csvxml.css

@@ -13,6 +13,23 @@
     --color-accent-hover: #CB9B8C;
 }
 
+@media (prefers-color-scheme: dark) {
+
+    :root {
+        --color-bg-normal: #000;
+        --color-bg-raised: #273000;
+        --color-bg-raised2: #121212;
+        --color-fg-normal: #FFF;
+        --color-fg-less: #EEE;
+        --color-borders: #37474F;
+        --color-borders-dark: #BDBDBD;
+
+        --color-accent-normal: #FFC107;
+        --color-accent-hover: #FFA000;
+    }
+
+}
+
 /* ==============
 |  Load fonts
 |================ */
@@ -31,7 +48,7 @@
 
 * { box-sizing: border-box; z-index: 1; }
 
-body { margin: 2em; background: var(--color-bg-normal);
+body { margin: 2em; background: var(--color-bg-normal); color: var(--color-fg-normal);
        font-family: sourceSansPro, Arial, Helvetica, Times; font-size: 1.2em; line-height: 1.5em; }
 
 a { text-decoration: none; color: inherit; }
@@ -101,7 +118,10 @@ td { padding: .3em .5em; border-bottom: 1px solid var(--color-borders); }
 body > div.uploader { background: var(--color-bg-raised2); border: 2px solid var(--color-bg-raised); padding: 1em 1em; }
 
 ul.fieldList { display: block; margin: .5em 0; padding: 0 0; list-style: none; }
-ul.fieldList > li { display: inline-block; padding: .3em; margin: .1em; border: 1px solid var(--color-borders); background: var(--color-bg-raised2); cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
+ul.fieldList > li { display: inline-block; margin: .1em; padding: .3em;
+    border: 1px solid var(--color-borders); background: var(--color-bg-raised2);
+    color: var(--color-fg-normal);
+    cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
 ul.fieldList > li:hover { background: var(--color-bg-normal); border-color: var(--color-fg-less); }
 ul.fieldList > li.requiredField:before { display: inline-block; content: " \002612  "; margin-right: .5em; }
 ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); background: var(--color-accent-hover); box-shadow: 0 8px 6px -6px black; }
@@ -139,43 +159,3 @@ ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); back
     body { font-size: 1.08em; }
     h1 img { display: none; }
 }
-
-/* =============
-|  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; }
-
-}