dark mode 😎 (#112)

* prepare dark mode stuffs

* themed all global colors

* store preference in local storage

* toggle styling

* lightbulb position

* minify bundled script with uglify-js instead of hugo

* detect whether user has an OS-wide dark mode preference and use that by default

* two different colors for each homepage link

* inline bulb SVGs into stylesheet

* fingerprint and cache styles for a year

* fix lightbulb positioning with weird magic numbers, will come back to that

* themed syntax highlighting

* use terser instead of uglify-js (b/c of ES6)

assets/sass/pages/_etc.scss

@@ -17,7 +17,6 @@ main#etc {
   }
 }
 
-
 // Responsive
 @mixin responsive--etc() {
   main#etc {

assets/sass/pages/_home.scss

@@ -43,21 +43,16 @@ main#home {
     margin-bottom: 0.5em;
     margin-left: 1em;
     padding: 4px;
-    border: 1px solid $color-light;
     border-radius: 50%;
     width: 160px;
     height: 160px;
+
+    @include themed() {
+      border: 1px solid t(color-light);
+    }
   }
 
   a {
-    // Loop through $colors-home (see abstracts/_variables)
-    @each $id, $color in $colors-home {
-      &##{$id} {
-        color: $color;
-        background-image: underline-hack($color);
-      }
-    }
-
     &#blog {
       font-size: 0.9em;
       margin-bottom: 0;
@@ -83,11 +78,22 @@ main#home {
     }
 
     &#shh {
-      color: $color-medium-light;
+      @include themed() {
+        color: t(color-medium-light);
+      }
     }
   }
 }
 
+// Loop through $colors-home (see abstracts/_variables)
+@each $id, $colors in $colors-home {
+  @each $theme, $color in $colors {
+    body.#{$theme} main#home a##{$id} {
+      color: $color;
+      background-image: underline-hack($color);
+    }
+  }
+}
 
 // Responsive
 @mixin responsive--home() {

assets/sass/pages/_list.scss

@@ -30,9 +30,12 @@ main#list {
       margin-bottom: 1em;
 
       div.date {
-        color: $color-medium;
         width: 5.25em;
         flex-shrink: 0;
+
+        @include themed() {
+          color: t(color-medium);
+        }
       }
 
       &:last-child {
@@ -42,7 +45,6 @@ main#list {
   }
 }
 
-
 // Responsive
 @mixin responsive--list() {
   main#list {

assets/sass/pages/_single.scss

@@ -7,12 +7,15 @@ main#single {
   margin: 0 auto;
 
   div#meta {
-    color: $color-medium;
     font-size: 0.85em;
     line-height: 1.3;
     letter-spacing: 0.04em;
     margin-top: 0.8em;
 
+    @include themed() {
+      color: t(color-medium);
+    }
+
     a {
       color: inherit;
     }
@@ -37,7 +40,10 @@ main#single {
   div#comments {
     margin-top: 1.5em;
     padding-top: 0.5em;
-    border-top: 2px solid $color-light;
+
+    @include themed() {
+      border-top: 2px solid t(color-light);
+    }
 
     div.utterances {
       max-width: unset;
@@ -45,7 +51,6 @@ main#single {
   }
 }
 
-
 // Responsive
 @mixin responsive--single() {
   main#single {

assets/sass/pages/_videos.scss

@@ -19,9 +19,12 @@ main#video {
     font-size: 0.85em;
     letter-spacing: -0.005em;
     line-height: 1.5;
-    color: #777777;
     margin: 1.25em 1em 0 1em;
 
+    @include themed() {
+      color: t(color-medium-light);
+    }
+
     a {
       font-weight: bold;
       letter-spacing: 0.001em;
@@ -35,7 +38,6 @@ main#video {
   }
 }
 
-
 // Responsive
 @mixin responsive--videos() {
   main#video {