Add dark mode

app.css

@@ -1,15 +1,29 @@
 
 * {
   box-sizing: border-box;
+
+  --background-color: white;
+  --text-color: #333;
+  --table-alternate-color: #f9f9f9;
+  --background-color-attribution: rgba(255, 255, 255, 0.8);
+}
+
+@media (prefers-color-scheme: dark) {
+  * {
+    --background-color: #333333;
+    --text-color: #cccccc;
+    --table-alternate-color: #444;
+    --background-color-attribution: rgba(51, 51, 51, 0.8);
+  }
 }
 
 body {
   margin: 0;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
   line-height: 1.42;
-  color: #333;
-  background-color: #fff;
+  color: var(--text-color);
+  background-color: var(--background-color);
   overflow-y: scroll;
 }
 
@@ -68,11 +82,11 @@ h1, h2, h3, h4, h5, h6 {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: #fff;
+  background: var(--background-color);
 }
 
 .table-striped > tbody > tr:nth-of-type(2n+1) {
-  background-color: #f9f9f9;
+  background-color: var(--table-alternate-color);
 }
 
 .table td, th {
@@ -175,6 +189,7 @@ h1, h2, h3, h4, h5, h6 {
 
 #wizard #type-pane .radiogroup label {
   background-color: #ffb400;
+  color: #333333;
 }
 
 #wizard #type-pane .radiogroup input[type="radio"]:checked + label {
@@ -230,7 +245,7 @@ h1, h2, h3, h4, h5, h6 {
   font: inherit;
   color: inherit;
   margin-bottom: .5em;
-  background: #fff;
+  background: var(--background-color);
   border: none;
   border: 1px solid #ddd;
   box-shadow: 1px 2px 2px 0 #ccc;
@@ -262,7 +277,7 @@ h1, h2, h3, h4, h5, h6 {
   display: inline-block;
   list-style-type: none;
   font: inherit;
-  color: black;
+  color: var(--text-color);
   margin: .5em;
   padding: .5em 1em;
   border: none;
@@ -272,7 +287,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard .btn:hover {
-  color: black;
+  color: var(--text-color);
 }
 
 #wizard .imagePreview {
@@ -309,7 +324,7 @@ h1, h2, h3, h4, h5, h6 {
   min-height: 11em;
   margin: 0.5em;
   padding: 0.5em;
-  border: 1px solid white;
+  border: 1px solid var(--background-color);
   text-align: center;
 }