Added basic dark mode functionality

css/style.css

@@ -112,6 +112,16 @@ input, button, select {
   width: 200px;
 }
 
+.switch {
+  position: absolute;
+  top: 18px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPjxwYXRoIGQ9Ik0xMiAxdjJNMTIgMjF2Mk00LjIyIDQuMjJsMS40MiAxLjQyTTE4LjM2IDE4LjM2bDEuNDIgMS40Mk0xIDEyaDJNMjEgMTJoMk00LjIyIDE5Ljc4bDEuNDItMS40Mk0xOC4zNiA1LjY0bDEuNDItMS40MiIvPjwvc3ZnPg==');
+  cursor: pointer;
+}
+
 button {
   cursor: pointer;
 }
@@ -153,7 +163,7 @@ aside > section {
 
 label {
   line-height: 36px;
-  margin: 0 5px 0 10px;
+  margin: 2px 5px 0 10px;
 }
 
 h1 {
@@ -172,6 +182,7 @@ h2 {
 
 header {
   margin: 0 0 40px 10px;
+  position: relative;
 }
 
 main {
@@ -292,6 +303,59 @@ header a {
   display: none;
 }
 
+/* dark mode */
+
+.dark {
+  background: #333;
+  color: #eee;
+}
+
+.dark a, .dark label {
+  color: #eee;
+}
+
+.dark .switch {
+  filter: invert();
+}
+
+.dark li {
+  border: 1px solid #333;
+  box-shadow: 1px 1px 2px #222;
+  background: #555;
+}
+
+.dark li img {
+  filter: drop-shadow(1px 1px 2px #222);
+}
+
+.dark li aside {
+  background: #444;
+  border-top: 1px solid #333;
+}
+
+.dark li aside div, .dark .link {
+  border-right: 1px solid #333;
+  color: #eee;
+}
+
+.dark li aside div:last-child {
+  border-right: none;
+}
+
+.dark input, .dark button, .dark select {
+  background: #555;
+  color: #eee;
+  border-color: #222;
+}
+
+.dark button:active, .dark button.active {
+  background: #666;
+}
+
+.dark .asc:after, .dark .desc:after {
+  filter: invert();
+}
+
 /* media queries */
 
 @media (max-width: 1200px) {