From 58af2fefce087097bf8dd6ca40540f5263d0d494 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 12 Feb 2020 00:04:59 +0800
Subject: [PATCH] Finished the rest dark mode toggle job.

---
 _includes/dark-mode-toggle.html   | 101 ++++++++++++++++++++++++++++++
 assets/css/_dark/dark-main.scss   |  86 ++++++++++++-------------
 assets/css/_dark/dark-syntax.scss |   2 +-
 assets/css/archives.scss          |   7 ---
 assets/css/categories.scss        |  22 -------
 assets/css/post.scss              |  12 ----
 assets/css/syntax.scss            |  14 ++++-
 7 files changed, 154 insertions(+), 90 deletions(-)
 create mode 100644 _includes/dark-mode-toggle.html

diff --git a/_includes/dark-mode-toggle.html b/_includes/dark-mode-toggle.html
new file mode 100644
index 0000000..b60cdb2
--- /dev/null
+++ b/_includes/dark-mode-toggle.html
@@ -0,0 +1,101 @@
+<!--
+  Switch the mode between dark and light.
+
+  v2.1
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+-->
+
+<i id="mode-toggle"></i>
+
+<script type="text/javascript">
+
+  class ModeToggle {
+    static get MODE_KEY() { return "mode"; }
+    static get DARK_MODE() { return "dark"; }
+    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();
+        }
+      }
+
+      var self = this;
+
+      /* always follow system prefers */
+      this.sysDarkPrefers.addListener(function() {
+        if (self.isSysDarkMode) {
+          ModeToggle.setDark();
+        } else {
+          ModeToggle.setLight();
+        }
+        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();
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+      $('html').removeClass('light-mode').addClass('dark-mode');
+    }
+
+    static setLight() {
+      ModeToggle.setDarkIcon();
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+      $('html').removeClass('dark-mode').addClass('light-mode');
+    }
+
+    static clearMode() {
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
+
+    get sysDarkPrefers() {
+      return window.matchMedia("(prefers-color-scheme: dark)");
+    }
+
+    get isSysDarkMode() {
+      return this.sysDarkPrefers.matches;
+    }
+
+    get mode() {
+      return sessionStorage.getItem(ModeToggle.MODE_KEY);
+    }
+
+    flipMode() {
+      if ((this.mode == null && this.isSysDarkMode) ||
+          this.mode == ModeToggle.DARK_MODE) {
+        ModeToggle.setLight();
+      } else { /* light mode or default-light */
+        ModeToggle.setDark();
+      }
+    }
+
+  } /* ModeToggle */
+
+  let toggle = new ModeToggle();
+
+  $("#mode-toggle").click(function() {
+    toggle.flipMode();
+  });
+
+</script>
\ No newline at end of file
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
index 51dcb06..939d923 100644
--- a/assets/css/_dark/dark-main.scss
+++ b/assets/css/_dark/dark-main.scss
@@ -46,6 +46,38 @@
   --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
 
+  /* posts' toc */
+  nav[data-toggle=toc] .nav-link.active,
+  nav[data-toggle=toc] .nav-link.active:focus,
+  nav[data-toggle=toc] .nav-link.active:hover,
+  nav[data-toggle=toc] .nav>li>a:focus,
+  nav[data-toggle=toc] .nav>li>a:hover {
+    /* Override BS */
+    color: var(--toc-highlight)!important;
+    border-left-color: var(--toc-highlight)!important;
+  }
+
+  /* categories */
+  .categories.card,
+  .list-group-item {
+    background-color: var(--card-bg);
+  }
+
+  .categories .card-header {
+    background-color: var(--card-header-bg);
+  }
+
+  .categories .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+    border-color: var(--main-border);
+  }
+
+  .categories .list-group-item:last-child {
+    border-bottom-color: var(--card-bg);
+  }
+
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
@@ -55,67 +87,27 @@
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
+
+  #archives li:nth-child(odd) {
+    background-image: linear-gradient(to left,
+      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+  }
+
 }
 
 /* Light scheme prefered (= dark scheme not prefered)
  * -> dark scheme triggered with <html class="dark-mode">
  */
 html.dark-mode {
-  /* Dark scheme */
   @include dark-scheme;
-
-  // Hide element in dark color scheme
-  // (visible in light scheme)
-  .dark-mode-hidden {
-    display: none;
-  }
-
-  .light-mode-hidden {
-    display: initial;
-  }
-}
-
-html:not(.dark-mode) {
-  // Hide element in dark color scheme
-  // (visible in light scheme)
-  .light-mode-hidden {
-    display: none;
-  }
-
-  .dark-mode-hidden {
-    display: initial;
-  }
 }
 
 
 @media (prefers-color-scheme: dark) {
   /* Dark scheme prefered
-   * -> light scheme triggered with <html class="light-mode">
+   *  -> light scheme triggered with <html class="light-mode">
    */
   html:not(.light-mode) {
-    /* Dark scheme */
     @include dark-scheme;
-    // Hide element in dark color scheme
-    // (visible in light scheme)
-    .dark-mode-hidden {
-      display: none;
-    }
-
-    .light-mode-hidden {
-      display: initial;
-    }
   }
-
-  html.light-mode {
-    /* Light scheme */
-    // Hide element in dark color scheme
-    // (visible in light scheme)
-    .light-mode-hidden {
-      display: none;
-    }
-    .dark-mode-hidden {
-      display: initial;
-    }
-  }
-
 }
diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss
index 621d36a..fcbbbd6 100644
--- a/assets/css/_dark/dark-syntax.scss
+++ b/assets/css/_dark/dark-syntax.scss
@@ -86,7 +86,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not(.light-mode) {
+  html:not(.light-mode) { /* could be html.dark-mode */
     @include dark-sheme;
   }
 }
diff --git a/assets/css/archives.scss b/assets/css/archives.scss
index 7092881..10784ff 100644
--- a/assets/css/archives.scss
+++ b/assets/css/archives.scss
@@ -147,10 +147,3 @@
     letter-spacing: 0;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  #archives li:nth-child(odd) {
-    background-image: linear-gradient(to left,
-      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
-  }
-}
diff --git a/assets/css/categories.scss b/assets/css/categories.scss
index 7c711c6..9b1804f 100644
--- a/assets/css/categories.scss
+++ b/assets/css/categories.scss
@@ -64,25 +64,3 @@
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
 }
-
-@media (prefers-color-scheme: dark) {
-  .categories.card,
-  .list-group-item {
-    background-color: var(--card-bg);
-  }
-
-  .categories .card-header {
-    background-color: var(--card-header-bg);
-  }
-
-  .categories .list-group-item {
-    border-left: none;
-    border-right: none;
-    padding-left: 2rem;
-    border-color: var(--main-border);
-  }
-
-  .categories .list-group-item:last-child {
-    border-bottom-color: var(--card-bg);
-  }
-}
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 13f636a..86412e4 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -269,15 +269,3 @@
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  nav[data-toggle=toc] .nav-link.active,
-  nav[data-toggle=toc] .nav-link.active:focus,
-  nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
-    /* Override BS */
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
-  }
-}
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 9a0091a..dffca78 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -165,7 +165,7 @@ div.language-terminal.highlighter-rouge td.rouge-code {
   padding: .8rem 1rem;
 }
 
-@media (prefers-color-scheme: light) {
+@mixin light-syntax-base {
   .highlight {
     -moz-box-shadow: inset 0 0 2px #c2c6cc;
     -webkit-box-shadow: inset 0 0 2px #c2c6cc;
@@ -180,3 +180,15 @@ div.language-terminal.highlighter-rouge td.rouge-code {
     border: 1px solid #e9ecef;
   }
 }
+
+@media (prefers-color-scheme: light) {
+  html:not(.dark-mode) {
+    @include light-syntax-base;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html.light-mode {
+    @include light-syntax-base;
+  }
+}