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

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 {