Refactor theme mode toggle

- Improve mode switching JS execution priority
- Drop deprecated Web API

_includes/mode-toggle.html

@@ -2,10 +2,7 @@
   Switch the mode between dark and light.
 -->
 
-<i class="mode-toggle fas fa-adjust"></i>
-
 <script type="text/javascript">
-
   class ModeToggle {
     static get MODE_KEY() { return "mode"; }
     static get DARK_MODE() { return "dark"; }
@@ -24,10 +21,10 @@
         }
       }
 
-      var self = this;
+      let self = this;
 
       /* always follow the system prefers */
-      this.sysDarkPrefers.addListener(function() {
+      this.sysDarkPrefers.addEventListener("change", () => {
         if (self.hasMode) {
           if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
@@ -48,6 +45,27 @@
 
     } /* constructor() */
 
+    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+
+    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+
+    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
+
+    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
+
+    get hasMode() { return this.mode != null; }
+
+    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer)) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
 
     setDark() {
       $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
@@ -64,28 +82,6 @@
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
-    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
-
-    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
-
-    get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
-
-    get isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
-
-    get hasMode() { return this.mode != null; }
-
-    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
-
-    /* get the current mode on screen */
-    get modeStatus() {
-      if (this.isDarkMode
-        || (!this.hasMode && this.isSysDarkPrefer) ) {
-        return ModeToggle.DARK_MODE;
-      } else {
-        return ModeToggle.LIGHT_MODE;
-      }
-    }
-
     updateMermaid() {
       if (typeof mermaid !== "undefined") {
         let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
@@ -103,49 +99,37 @@
       }
     }
 
-    flipMode() {
-      if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
+  } /* ModeToggle */
 
+  const toggle = new ModeToggle();
+
+  function flipMode() {
+    if (toggle.hasMode) {
+      if (toggle.isSysDarkPrefer) {
+        if (toggle.isLightMode) {
+          toggle.clearMode();
         } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
+          toggle.setLight();
         }
 
       } else {
-        if (this.isSysDarkPrefer) {
-          this.setLight();
+        if (toggle.isDarkMode) {
+          toggle.clearMode();
         } else {
-          this.setDark();
+          toggle.setDark();
         }
       }
 
-      this.updateMermaid();
-
-    } /* flipMode() */
-
-  } /* ModeToggle */
-
-  let toggle = new ModeToggle();
-
-  $(".mode-toggle").click(function() {
-
-    toggle.flipMode();
-
-  });
-
-  $("#mode-toggle-wrapper").keyup(function(e){
-    if(e.keyCode == 13) {
-      toggle.flipMode();
+    } else {
+      if (toggle.isSysDarkPrefer) {
+        toggle.setLight();
+      } else {
+        toggle.setDark();
+      }
     }
-  });
+
+    toggle.updateMermaid();
+
+  } /* flipMode() */
 
 </script>

_includes/sidebar.html

@@ -52,7 +52,17 @@
   </ul> <!-- ul.nav.flex-column -->
 
   <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
-    
+
+    {% unless site.theme_mode %}
+      <a id="mode-toggle-wrapper" tabindex="0" onclick="flipMode()">
+        <i class="mode-toggle fas fa-adjust"></i>
+      </a>
+
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border"></span>
+      {% endif %}
+    {% endunless %}
+
     {% for entry in site.data.contact %}
       {% capture url %}
         {%- if entry.type == 'github' -%}
@@ -71,7 +81,6 @@
 
       {% if url %}
       <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
         {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
         <i class="{{ entry.icon }}"></i>
       </a>
@@ -79,16 +88,6 @@
 
     {% endfor %}
 
-    {% unless site.theme_mode %}
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border order-2"></span>
-      {% endif %}
-
-      <span id="mode-toggle-wrapper" class="order-1" tabindex="0">
-        {% include mode-toggle.html %}
-      </span>
-    {% endunless %}
-
   </div> <!-- .sidebar-bottom -->
 
 </div><!-- #sidebar -->