Optimized the dark-mode toggle

_includes/mode-toggle.html

@@ -7,7 +7,8 @@
   MIT License
 -->
 
-<i id="mode-toggle"></i>
+<i class="mode-toggle fas fa-sun" light-mode-invisible></i>
+<i class="mode-toggle fas fa-moon" dark-mode-invisible></i>
 
 <script type="text/javascript">
 
@@ -17,55 +18,54 @@
     static get LIGHT_MODE() { return "light"; }
 
     constructor() {
-      if (this.isSysDarkMode) {
-        ModeToggle.setLightIcon();
-      } else {
-        ModeToggle.setDarkIcon();
-      }
-
       if (this.mode != null) {
         if (this.mode == ModeToggle.DARK_MODE) {
-          ModeToggle.setDark();
-        } else if (this.mode == ModeToggle.LIGHT_MODE) {
-          ModeToggle.setLight();
+          if (!this.isDarkPrefer) {
+            this.setDark();
+          }
+        } else {
+          if (this.isDarkPrefer) {
+            this.setLight();
+          }
         }
       }
 
       var self = this;
 
-      /* always follow system prefers */
+      /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.isSysDarkMode) {
-          ModeToggle.setDark();
-        } else {
-          ModeToggle.setLight();
+
+        if (self.mode != null) {
+          if (self.mode == ModeToggle.DARK_MODE) {
+            if (!self.isDarkPrefer) {
+              self.setDark();
+            }
+
+          } else {
+            if (self.isDarkPrefer) {
+              self.setLight();
+            }
+          }
+
+          self.clearMode();
         }
-        ModeToggle.clearMode();
       });
 
     } /* constructor() */
 
-    static setDarkIcon() {
-      $("#mode-toggle").removeClass("fas fa-sun").addClass("fas fa-moon");
-    }
 
-    static setLightIcon() {
-      $("#mode-toggle").removeClass("fas fa-moon").addClass("fas fa-sun");
-    }
-
-    static setDark() {
-      ModeToggle.setLightIcon();
+    setDark() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
-      $('html').removeClass('light-mode').addClass('dark-mode');
     }
 
-    static setLight() {
-      ModeToggle.setDarkIcon();
+    setLight() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
-      $('html').removeClass('dark-mode').addClass('light-mode');
     }
 
-    static clearMode() {
+    clearMode() {
+      $('html').removeAttr(ModeToggle.MODE_KEY);
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
@@ -73,7 +73,7 @@
       return window.matchMedia("(prefers-color-scheme: dark)");
     }
 
-    get isSysDarkMode() {
+    get isDarkPrefer() {
       return this.sysDarkPrefers.matches;
     }
 
@@ -82,11 +82,12 @@
     }
 
     flipMode() {
-      if ((this.mode == null && this.isSysDarkMode) ||
+      if ((this.mode == null && this.isDarkPrefer) ||
           this.mode == ModeToggle.DARK_MODE) {
-        ModeToggle.setLight();
+        this.setLight();
+
       } else { /* light mode or default-light */
-        ModeToggle.setDark();
+        this.setDark();
       }
     }
 
@@ -94,7 +95,7 @@
 
   let toggle = new ModeToggle();
 
-  $("#mode-toggle").click(function() {
+  $(".mode-toggle").click(function() {
     toggle.flipMode();
   });
 

_includes/sidebar.html

@@ -58,7 +58,7 @@
 <div class="sidebar-bottom d-flex justify-content-around mt-4">
 
   <span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
-    {% include dark-mode-toggle.html %}
+    {% include mode-toggle.html %}
   </span>
 
   <a href="https://github.com/{{ site.github.username }}" target="_blank">