add nice and soothing fade transition when dark/light mode is toggled

assets/js/src/dark-mode.js

@@ -1,9 +1,24 @@
-import { init } from "dark-mode-switcheroo";
+import { init as darkModeInit } from "dark-mode-switcheroo";
 
-init({
+// HACK: disable theme transition until user's preference is auto-restored (1/2)
+const disableTransitionCSSHack = document.createElement("style");
+disableTransitionCSSHack.innerHTML = `
+*,
+::before,
+::after {
+  transition-property: none !important;
+}`;
+document.head.appendChild(disableTransitionCSSHack);
+
+darkModeInit({
   toggle: document.querySelector(".dark-mode-toggle"),
   onInit: function (t) {
     // make toggle visible now that we know JS is enabled
     t.style.display = "block";
+
+    // HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
+    setTimeout(() => {
+      document.head.removeChild(disableTransitionCSSHack);
+    }, 250);
   },
 });

assets/sass/abstracts/_settings.scss

@@ -27,3 +27,8 @@ $responsive-width: 800px;
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
 $link-opacity-color: #ffffff;
+
+// Elements to fade on dark/light theme toggle:
+$theme-transition-elements: ("color", "background-color", "border-color");
+$theme-transition-duration: 0.15s;
+$theme-transition-function: linear;

assets/sass/abstracts/_themes.scss

@@ -1,14 +1,41 @@
 @use "sass:map";
 @use "sass:string";
+@use "sass:list";
 
-@use "../abstracts/functions" as *;
+@use "settings";
+@use "functions" as *;
 
 // Takes a single CSS property and theme key (see abstracts/_themes) and sets
 // both body.light and body.dark selectors.
-@mixin themed($property, $key) {
-  // hack to allow root (body) theming
+@mixin themed($property, $key, $moreTransitions: "") {
+  // allow root element (body) theming
   $selectors: str-split("#{&}");
 
+  // fade colors on theme toggle
+  $transitions: ();
+  @each $element in settings.$theme-transition-elements {
+    $transitions: list.append(
+      $transitions,
+      string.unquote(
+        "#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}"
+      )
+    );
+  }
+  @if $moreTransitions != "" {
+    // HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
+    $transitions: list.append($transitions, string.unquote($moreTransitions));
+  }
+  @each $selector in $selectors {
+    @if $selector == "" {
+      // support root body element
+      $selector: "body";
+    }
+    @at-root #{$selector} {
+      transition: list.join($transitions, (), $separator: comma);
+    }
+  }
+
+  // set the actual light/dark properties
   @each $theme, $map in $themes {
     @each $selector in $selectors {
       @at-root body.#{$theme} #{$selector} {

assets/sass/components/_global.scss

@@ -77,9 +77,8 @@ a {
   background-repeat: no-repeat;
   background-size: 0% settings.$link-underline-size;
   padding-bottom: settings.$link-underline-size;
-  transition: background-size 0.25s ease-in-out;
 
-  @include themes.themed(color, "links");
+  @include themes.themed(color, "links", ("background-size 0.25s ease-in-out"));
 
   // cool link underlines (via messy SCSS hacking):
   // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

assets/sass/components/_header.scss

@@ -62,15 +62,14 @@ header {
 
         a {
           display: inline-block;
-          transition: transform 0.15s ease-in-out;
           will-change: transform;
 
-          @include themes.themed(color, "medium-dark");
+          @include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out"));
 
           &:hover {
             transform: scale(1.1);
 
-            @include themes.themed(color, "links");
+            @include themes.themed(color, "links", ("transform 0.15s ease-in-out"));
           }
 
           span.icon {

package.json

@@ -96,8 +96,10 @@
     "postcss-cli": "^8.3.1",
     "postcss-color-rgba-fallback": "^4.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-discard-duplicates": "^5.0.1",
     "postcss-focus": "^5.0.1",
     "postcss-loader": "^6.1.1",
+    "postcss-merge-rules": "^5.0.2",
     "postcss-normalize-charset": "^5.0.1",
     "postcss-reporter": "^7.0.2",
     "postcss-svgo": "^5.0.2",

webpack.config.js

@@ -12,6 +12,8 @@ import autoprefixer from "autoprefixer";
 import postcssSvgo from "postcss-svgo";
 import postcssFocus from "postcss-focus";
 import postcssColorRgbaFallback from "postcss-color-rgba-fallback";
+import postcssMergeRules from "postcss-merge-rules";
+import postcssDiscardDuplicates from "postcss-discard-duplicates";
 import postcssCombineDuplicatedSelectors from "postcss-combine-duplicated-selectors";
 import postcssNormalizeCharset from "postcss-normalize-charset";
 
@@ -144,6 +146,8 @@ export default {
                     ],
                   }),
                   postcssCombineDuplicatedSelectors(),
+                  postcssMergeRules(),
+                  postcssDiscardDuplicates(),
                   postcssNormalizeCharset(),
                 ],
               },

yarn.lock

@@ -7298,9 +7298,9 @@ node-fetch@2.6.1:
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
 node-fetch@^2.6.1:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.4.tgz#7f1d13b8f9ff0c1a994dc6f73c69f7d652c7ace2"
-  integrity sha512-aD1fO+xtLiSCc9vuD+sYMxpIuQyhHscGSkBEo2o5LTV/3bTEAYvdUii29n8LlO5uLCmWdGP7uVUVXFo5SRdkLA==
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"
+  integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==
   dependencies:
     whatwg-url "^5.0.0"