Dark Mode (#168)

* Implement toggle button

* Dark mode mixins

* Dark mode color design

* Disable dark mode for prints

* Initial dark mode design

* Fix light mode mixin

* Disable dark mode on print style

* Move dark mode color scheme below the default style to allow referencing

* Fix dropdown

* Fix device-based dark mode

* Dark mode index page design

* Responsive auxiliary nav with dark mode toggle

* Remove box shadow when on smaller displays

* Prevent default on toggle click

* Move attribution/licensing to README.md

* Fix header padding on index page

* Background color transition animation

* Remove margin on index when on mobile displays

* Remove neon border when on mobile

* Fix post-header margin on mobile

* Lighten card headers in dark mode

scss/_markup.scss

@@ -1,16 +1,19 @@
 
 .markup {
   -webkit-font-smoothing: antialiased;
+  transition: background-color 0.5s;
 
   p a {
     transition-property: color, padding, margin;
     transition-duration: 0.3s;
     transition-timing-function: ease;
-    color: $primary;
     text-decoration: underline;
 
-    &:hover {
-      color: #e84992;
+    @include light-mode {
+      color: $primary;
+      &:hover {
+        color: #e84992;
+      }
     }
   }
 
@@ -34,6 +37,13 @@
     padding: 15px;
     color: black;
 
+    @include dark-mode {
+      background: darken($trans-blue-darkest, 10%);
+      border: 1px solid #0087bb;
+      color: $body-color-dark;
+      box-shadow: 0 0 5px 2px rgba($trans-blue,0.5);
+    }
+
     color-adjust: exact;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
@@ -87,6 +97,12 @@
       img {
         height: 1em;
       }
+
+      @include dark-mode {
+        // Convert the black svg icon to the $primary color at runtime using CSS filters
+        // https://stackoverflow.com/a/43960991
+        filter: invert(34%) sepia(87%) saturate(2698%) hue-rotate(313deg) brightness(108%) contrast(98%);
+      }
     }
 
     + {
@@ -152,6 +168,11 @@
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 
+  @include dark-mode {
+    background-color: lighten($content-bg-dark, 5%);
+    color: #fff;
+  }
+
   font-size: 0.8rem;
   font-weight: 300;