From 65040ddd90ae59377906f551dd23202859caf48d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 14 Feb 2020 23:36:38 +0800
Subject: [PATCH] Optimized the dark-mode toggle

---
 ...dark-mode-toggle.html => mode-toggle.html} | 71 ++++++++++---------
 _includes/sidebar.html                        |  2 +-
 assets/css/_dark/dark-main.scss               | 44 +++++++++---
 assets/css/_dark/dark-syntax.scss             | 10 +--
 assets/css/syntax.scss                        |  4 +-
 5 files changed, 78 insertions(+), 53 deletions(-)
 rename _includes/{dark-mode-toggle.html => mode-toggle.html} (53%)

diff --git a/_includes/dark-mode-toggle.html b/_includes/mode-toggle.html
similarity index 53%
rename from _includes/dark-mode-toggle.html
rename to _includes/mode-toggle.html
index b60cdb2..b963757 100644
--- a/_includes/dark-mode-toggle.html
+++ b/_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();
   });
 
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 1b0814c..a994093 100644
--- a/_includes/sidebar.html
+++ b/_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">
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
index 54be06e..4aebd1e 100644
--- a/assets/css/_dark/dark-main.scss
+++ b/assets/css/_dark/dark-main.scss
@@ -100,19 +100,43 @@
 
 }
 
-/* Light scheme prefered (= dark scheme not prefered)
- * -> dark scheme triggered with <html class="dark-mode">
- */
-html.dark-mode {
-  @include dark-scheme;
+
+@mixin light-mode-invisible {
+  *[light-mode-invisible] {
+      display: none;
+  }
 }
 
+@mixin dark-mode-invisible {
+  *[dark-mode-invisible] {
+      display: none;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+
+  html:not([mode]), html[mode=light] {
+    @include light-mode-invisible;
+  }
+
+  html[mode=dark] {
+    @include dark-scheme;
+    @include dark-mode-invisible;
+  }
+
+} // light prefers
+
 
 @media (prefers-color-scheme: dark) {
-  /* Dark scheme prefered
-   *  -> light scheme triggered with <html class="light-mode">
-   */
-  html:not(.light-mode) {
+
+  html:not([mode]), html[mode=dark] {
     @include dark-scheme;
+    @include dark-mode-invisible;
   }
-}
+
+  html[mode=light] {
+    @include light-mode-invisible;
+  }
+
+} // dark prefers
+
diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss
index fcbbbd6..4487edd 100644
--- a/assets/css/_dark/dark-syntax.scss
+++ b/assets/css/_dark/dark-syntax.scss
@@ -6,7 +6,7 @@
 * MIT Licensed
 */
 
-@mixin dark-sheme {
+@mixin dark-scheme {
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   --highlight-pre-bg: #272822;
   --highlight-hll-bg: #272822;
@@ -86,13 +86,13 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not(.light-mode) { /* could be html.dark-mode */
-    @include dark-sheme;
+  html:not([mode]), html[mode=dark] {
+    @include dark-scheme;
   }
 }
 
 @media (prefers-color-scheme: light) {
-  html.dark-mode {
-    @include dark-sheme;
+  html[mode=dark] {
+    @include dark-scheme;
   }
 }
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index dffca78..6002f8d 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -182,13 +182,13 @@ div.language-terminal.highlighter-rouge td.rouge-code {
 }
 
 @media (prefers-color-scheme: light) {
-  html:not(.dark-mode) {
+  html:not([mode=dark]) {
     @include light-syntax-base;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  html.light-mode {
+  html[mode=light] {
     @include light-syntax-base;
   }
 }