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-18 15:05:32 -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/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@@ -6,10 +6,13 @@
  // Calculate lighter underline color compared to text color by
  // mix()'ing with background (#fff) to give the impression of
  // opacity but with MUCH better compatibility.
-  $color-opaque: mix($color, $color-background, $link-underline-opacity);
+  $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
+
+  // Less compatible but better for light/dark mode switching.
+  $color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);

  // Return non-gradient linear-gradient():
-  @return linear-gradient($color-opaque, $color-opaque);
+  @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
 }

 // Web fonts (see components/_fonts.scss)
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@@ -0,0 +1,118 @@
+@charset "UTF-8";
+
+// Dark & Light Themes
+$themes: (
+  light: (
+    color-background:   #ffffff,
+    color-text:         #202020,
+    color-medium-dark:  #494949,
+    color-medium:       #5e5e5e,
+    color-medium-light: #757575,
+    color-light:        #d2d2d2,
+    color-kinda-light:  #e3e3e3,
+    color-super-light:  #f4f4f4,
+    color-super-duper-light: #fbfbfb,
+    color-links:        #0e6dc2,
+    syntax-k:           #0e6dc2,
+    syntax-n:           #111111,
+    syntax-na:          #337a15,
+    syntax-err:         #d43d2e,
+    syntax-l:           #8d4eff,
+    syntax-ld:          #bd5500,
+    syntax-c:           #6b6859,
+    syntax-lnt:         #999999
+  ),
+  dark: (
+    color-background:   #292929,
+    color-text:         #efefef,
+    color-medium-dark:  #cfcfcf,
+    color-medium:       #b1b1b1,
+    color-medium-light: #929292,
+    color-light:        #646464,
+    color-kinda-light:  #535353,
+    color-super-light:  #272727,
+    color-super-duper-light: #1f1f1f,
+    color-links:        #85baea,
+    syntax-k:           #3b9dd2,
+    syntax-n:           #cfcfcf,
+    syntax-na:          #78df55,
+    syntax-err:         #f95757,
+    syntax-l:           #d588fb,
+    syntax-ld:          #fd992a,
+    syntax-c:           #929292,
+    syntax-lnt:         #b1b1b1
+  )
+);
+
+$color-light-background: #fbfbfb;
+$color-dark-background: #1f1f1f;
+
+// For nifty color swapping on svg logo hover in components/_header.scss
+$color-logo1: #6fbc4e;
+$color-logo2: #ffb900;
+$color-logo3: #009cdf;
+
+// Colorful Homepage
+$colors-home:(
+  boston:     (light: #fb4d42, dark: #ff5146),
+  javascript: (light: #f48024, dark: #e18431),
+  node:       (light: #6fbc4e, dark: #84d95f),
+  golang:     (light: #00acd7, dark: #2ad1fb),
+  react:      (light: #4fb3cd, dark: #6fcbe3),
+  angular:    (light: #c3002f, dark: #f95757),
+  php:        (light: #8892bf, dark: #a4afe3),
+  ruby:       (light: #d34135, dark: #f95a4d),
+  python:     (light: #fea500, dark: #ffbb3c),
+  java:       (light: #ab6311, dark: #e86a2c),
+  infosec:    (light: #00b81a, dark: #57f06d),
+  server:     (light: #0098ec, dark: #43b9fb),
+  devops:     (light: #ff6200, dark: #f46c16),
+  containers: (light: #c48f49, dark: #ca9249),
+  y2k:        (light: #4169e1, dark: #8ca9ff),
+  jbb:        (light: #9932cc, dark: #d588fb),
+  birthday:   (light: #e40088, dark: #fd40b1),
+  github:     (light: #8d4eff, dark: #a379f0),
+  linkedin:   (light: #0073b1, dark: #3b9dd2),
+  twitter:    (light: #00acee, dark: #3bc9ff),
+  dm:         (light: #00acee, dark: #3bc9ff),
+  facebook:   (light: #4267b2, dark: #5f8dec),
+  instagram:  (light: #a37754, dark: #c49169),
+  mastodon:   (light: #6d8ca7, dark: #87b0d5),
+  resume:     (light: #d54b3d, dark: #f46151),
+  email:      (light: #de0c0c, dark: #ff5050),
+  pgp:        (light: #757575, dark: #979797),
+  sms:        (light: #6fcc01, dark: #8edb34),
+  news-1:     (light: #ff1b1b, dark: #f06060),
+  news-2:     (light: #f78200, dark: #fd992a),
+  news-3:     (light: #f2b702, dark: #ffcc2e),
+  news-4:     (light: #5ebd3e, dark: #78df55),
+  news-5:     (light: #009cdf, dark: #29bfff),
+  news-6:     (light: #3e49bb, dark: #7b87ff),
+  news-7:     (light: #973999, dark: #db60dd)
+);
+$color-serverless: #87cef7;
+
+// Icons (modified twemojis)
+// lightbulb on
+$icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
+// lightbulb off
+$icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
+
+// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+@mixin themed() {
+  @each $theme, $map in $themes {
+    body.#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function t($key) {
+  @return map-get($theme-map, $key);
+}
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@@ -16,64 +16,10 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
               "Menlo", "Courier", monospace;
 // stylelint-enable indentation

-// Misc Settings
+// Width at which to switch to mobile styles
 $responsive-width: 820px;
+
+// Fancy link underline settings
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
-
-// Global Colors
-$color-background:   #ffffff;
-$color-text:         #202020;
-$color-medium-dark:  #494949;
-$color-medium:       #5e5e5e;
-$color-medium-light: #757575;
-$color-light:        #d2d2d2;
-$color-kinda-light:  #e3e3e3;
-$color-super-light:  #f4f4f4;
-$color-super-duper-light: #fbfbfb;
-$color-links:        #0e6dc2;
-
-// For nifty color swapping on svg logo hover in components/_header.scss
-$color-logo1: #6fbc4e;
-$color-logo2: #ffb900;
-$color-logo3: #009cdf;
-
-// Colorful Homepage
-$colors-home:(
-  boston:     #fb4d42,
-  javascript: #f48024,
-  node:       #6fbc4e,
-  golang:     #00acd7,
-  react:      #4fb3cd,
-  angular:    #c3002f,
-  php:        #8892bf,
-  ruby:       #d34135,
-  python:     #fea500,
-  java:       #ab6311,
-  infosec:    #00b81a,
-  server:     #0098ec,
-  devops:     #ff6200,
-  containers: #c48f49,
-  y2k:        #4169e1,
-  jbb:        #9932cc,
-  birthday:   #e40088,
-  github:     #8d4eff,
-  linkedin:   #0073b1,
-  facebook:   #4267b2,
-  twitter:    #00acee,
-  dm:         #00acee,
-  instagram:  #a37754,
-  mastodon:   #6d8ca7,
-  resume:     #d54b3d,
-  email:      #de0c0c,
-  pgp:        #757575,
-  sms:        #6fcc01,
-  news-1:     #ff1b1b,
-  news-2:     #f78200,
-  news-3:     #f2b702,
-  news-4:     #5ebd3e,
-  news-5:     #009cdf,
-  news-6:     #3e49bb,
-  news-7:     #973999
-);
-$color-serverless: #87cef7;
+$link-opacity-color: #ffffff;