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)
2025-09-15 22:25:33 -04:00 · 2020-04-20 15:04:30 -04:00
parent b53574f3ef
commit b13da8e05b
27 changed files with 477 additions and 176 deletions
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@@ -16,7 +16,10 @@ div#content {

  h2 {
    padding-bottom: 0.25em;
-    border-bottom: 1px solid $color-kinda-light;
+
+    @include themed() {
+      border-bottom: 1px solid t(color-kinda-light);
+    }
  }

  p.image img,
@@ -38,8 +41,11 @@ div#content {
    // image captions
    figcaption {
      font-size: 0.95em;
-      color: $color-medium;
      text-align: center;
+
+      @include themed() {
+        color: t(color-medium);
+      }
    }
  }

@@ -103,8 +109,7 @@ div#content {
  }
 }

-
 // Responsive
@mixin responsive--content() {
-  // stylelint-disable block-no-empty
+  // stylelint-disable-block block-no-empty
 }
--- a/assets/sass/components/_footer.scss
+++ b/assets/sass/components/_footer.scss
@@ -7,11 +7,17 @@ footer {
  line-height: 1.7;
  padding: 1.25em 1.75em;
  box-sizing: border-box;
-  color: $color-medium;
-  border-top: 1px solid $color-light;
+
+  @include themed() {
+    color: t(color-medium);
+    border-top: 1px solid t(color-kinda-light);
+    background-color: t(color-super-duper-light);
+  }

  a {
-    color: inherit;
+    @include themed() {
+      color: t(color-medium);
+    }
  }

  div#row {
@@ -38,8 +44,11 @@ footer {
      text-align: right;

      a#source {
-        border-bottom: 1px solid $color-light;
        padding-bottom: 2px;
+
+        @include themed() {
+          border-bottom: 1px solid t(color-light);
+        }
      }
    }

--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@@ -5,8 +5,6 @@ body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
-  background-color: $color-super-duper-light;   // really just the color of header & footer
-  color: $color-text;
  font-family: $webfont-sans;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
@@ -14,16 +12,25 @@ body {
  box-sizing: border-box;
 }

+main {
+  @include themed() {
+    color: t(color-text);
+  }
+}
+
 a {
-  color: $color-links;
  text-decoration: none;
-  background-image: underline-hack($color-links);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% $link-underline-size;
  padding-bottom: $link-underline-size;
  transition: background-size 0.25s ease-in-out;

+  @include themed() {
+    color: t(color-links);
+    background-image: underline-hack(t(color-links));
+  }
+
  &:hover {
    background-size: 100% $link-underline-size;
  }
@@ -39,42 +46,76 @@ strong {
 }

 blockquote {
-  border-left: 5px solid $color-links;
  margin-left: 0.5em;
  padding-left: 1em;
+
+  @include themed() {
+    border-left: 5px solid t(color-links);
+  }
 }

 hr {
  margin: 1.5em auto;
  height: 2px;
  border: 0;
-  background-color: $color-light;
+
+  @include themed() {
+    background-color: t(color-light);
+  }
+}
+
+// button reset
+button {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+
+  // inherit font & color from ancestor
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+
+  // corrects inability to style clickable `input` types in iOS
+  appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
 }

 // all code
 code {
  font-family: $webfont-mono;
-  background: $color-super-duper-light;
  font-size: 0.95em;
  letter-spacing: 0;
  page-break-inside: avoid;

  // inline code in paragraphs (single tildes)
-  border: 1px solid $color-light;
  padding: 0.2em;
+
+  @include themed() {
+    background-color: t(color-super-duper-light);
+    border: 1px solid t(color-light);
+  }
 }

 // code fences
 div.highlight {
-  background: $color-super-duper-light;
-  border: 1px solid $color-light;
-  border-left: 3px solid $color-links;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: scroll;
  object-fit: scale-down;
  margin: 1em 0;

+  @include themed() {
+    border: 1px solid t(color-light);
+    border-left: 3px solid t(color-links);
+    background-color: t(color-super-duper-light);
+  }
+
  pre {
    display: block;
    margin-left: 1.5em;
@@ -100,9 +141,31 @@ img.emoji {
 // white background for entire width content area
 div#wrap {
  width: 100%;
-  background-color: $color-background;
+
+  @include themed() {
+    background-color: t(color-background);
+  }
 }

+// manually setting light/dark mode backgrounds and bulb icon
+// really just the color of header & footer
+body {
+  &.light {
+    background-color: $color-light-background;
+
+    button#dark-mode-toggle {
+      background-image: url($icon-bulb-on);
+    }
+  }
+
+  &.dark {
+    background-color: $color-dark-background;
+
+    button#dark-mode-toggle {
+      background-image: url($icon-bulb-off);
+    }
+  }
+}

 // Responsive
@mixin responsive--global() {
--- a/assets/sass/components/_header.scss
+++ b/assets/sass/components/_header.scss
@@ -3,7 +3,11 @@
 // Global Header Styles
 header {
  width: 100%;
-  border-bottom: 1px solid $color-kinda-light;
+
+  @include themed() {
+    border-bottom: 1px solid t(color-kinda-light);
+    background-color: t(color-super-duper-light);
+  }

  nav {
    width: 100%;
@@ -18,7 +22,10 @@ header {
    a#logo {
      display: flex;
      align-items: center;
-      color: $color-medium-dark;
+
+      @include themed() {
+        color: t(color-medium-dark);
+      }

      h1#name {
        margin-left: 0.8em;
@@ -34,7 +41,9 @@ header {

      // mix up logo colors on hover
      &:hover {
-        color: $color-links;
+        @include themed() {
+          color: t(color-links);
+        }

        svg {
          g#c1 {
@@ -65,12 +74,18 @@ header {

        a {
          display: inline-block;
-          color: $color-medium;
          transition: transform 0.15s ease-in-out;

+          @include themed() {
+            color: t(color-medium);
+          }
+
          &:hover {
            transform: scale(1.15);
-            color: $color-links;
+
+            @include themed() {
+              color: t(color-links);
+            }
          }

          span.icon {
@@ -89,11 +104,23 @@ header {
          margin-left: 0;
        }
      }
+
+      // Dark mode toggle
+      button#dark-mode-toggle {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        height: 1.5em;
+        width: 1em;
+        cursor: pointer;
+
+        // hide by default in case user's JS is disabled
+        visibility: hidden;
+      }
    }
  }
 }

-
 // Responsive
@mixin responsive--header() {
  header nav {
@@ -115,7 +142,7 @@ header {
      font-size: 1.7em;

      li {
-        margin-left: 1em;
+        margin-left: 0.85em;

        a {
          span.icon {
@@ -132,6 +159,14 @@ header {
          }
        }
      }
+
+      // Dark mode toggle
+      button#dark-mode-toggle {
+        // TODO: figure out need for weird magic numbers here
+        height: 1.025em;
+        width: 0.75em;
+        margin-top: 0.125em;
+      }
    }
  }
 }
--- a/assets/sass/components/_syntax.scss
+++ b/assets/sass/components/_syntax.scss
@@ -3,25 +3,39 @@
 /*! Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
 div.highlight span {
  &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
-    color: #03748a;
+    @include themed() {
+      color: t(syntax-k);
+    }
  }
  &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
-    color: #111111;
+    @include themed() {
+      color: t(syntax-n);
+    }
  }
  &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
-    color: #068200;
+    @include themed() {
+      color: t(syntax-na);
+    }
  }
  &.err, &.nt, &.o, &.ow, &.kn {
-    color: #e8003d;
+    @include themed() {
+      color: t(syntax-err);
+    }
  }
  &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
-    color: #8145ec;
+    @include themed() {
+      color: t(syntax-l);
+    }
  }
  &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
-    color: #b35c00;
+    @include themed() {
+      color: t(syntax-ld);
+    }
  }
  &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
-    color: #6b6859;
+    @include themed() {
+      color: t(syntax-c);
+    }
  }
  &.ge {
    font-style: italic;
@@ -32,7 +46,10 @@ div.highlight span {

  // line numbers
  &.lnt {
-    color: #999999;
    user-select: none;
+
+    @include themed() {
+      color: t(syntax-lnt);
+    }
  }
 }