From b8c34564206eba33bb322b49b0bebd19800b182b Mon Sep 17 00:00:00 2001
From: Miranquil <miranquil@gmail.com>
Date: Sat, 23 Jan 2021 22:31:20 +0800
Subject: [PATCH] fix mixed background color under dark mode

---
 source/css/common/variables.styl | 10 +++--
 source/js/dark-light-toggle.js   | 75 ++++++++++++++++++++------------
 2 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index d64a634..8a38319 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -136,16 +136,18 @@ root-color(mode) {
 }
 
 
-:root {
-  root-color('light');
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     root-color('dark');
   }
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    root-color('light');
+  }
+}
+
 .light-mode {
   root-color('light');
 }
diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js
index 8b6749e..620baf7 100644
--- a/source/js/dark-light-toggle.js
+++ b/source/js/dark-light-toggle.js
@@ -7,67 +7,88 @@ KEEP.initModeToggle = () => {
     iconDom: document.querySelector('.tool-dark-light-toggle i'),
     articleContent: document.querySelector('.main-content'),
 
-    setItemUtil(modeClass, prefersColorScheme) {
-      document.body.classList.toggle(modeClass);
-      const isDark = document.body.className.indexOf(modeClass) === -1;
-
+    setItemUtil(modeClass) {
+      const isDark = document.body.className.indexOf('light-mode') === -1;
+      let currentScheme = "";
       if (isDark) {
-        this.iconDom.className = 'fas fa-moon';
-        this.articleContent.classList.remove('night-code-theme');
+        this.enableLightMode();
+        currentScheme = "light";
       } else {
-        this.iconDom.className = 'fas fa-sun';
-        this.articleContent.classList.add('night-code-theme');
+        this.enableDarkMode();
+        currentScheme = "dark";
       }
       localStorage.setItem(this.localStorageKey, JSON.stringify(
         {
-          prefersColorScheme: prefersColorScheme,
-          isDark: isDark
+          prefersColorScheme: currentScheme,
+          isDark: !isDark
         }
       ));
     },
 
+    enableLightMode() {
+      document.body.classList.remove('dark-mode');
+      document.body.classList.add('light-mode');
+      this.articleContent.classList.remove('night-code-theme');
+      this.iconDom.className = 'fas fa-moon';
+    },
+
+    enableDarkMode() {
+      document.body.classList.remove('light-mode');
+      document.body.classList.add('dark-mode');
+      this.articleContent.classList.add('night-code-theme');
+      this.iconDom.className = 'fas fa-sun';
+    },
+
     initModeStatus() {
       this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey));
       if (this.modeConfig) {
         if (this.modeConfig.prefersColorScheme === 'dark') {
           if (this.modeConfig.isDark) {
-            document.body.classList.remove('light-mode');
-            this.articleContent.classList.remove('night-code-theme');
-            this.iconDom.className = 'fas fa-sun';
+            this.enableDarkMode();
           } else {
-            document.body.classList.add('light-mode');
-            this.articleContent.classList.add('night-code-theme');
-            this.iconDom.className = 'fas fa-moon';
+            this.enableLightMode();
           }
         } else {
-
           if (this.modeConfig.isDark) {
-            document.body.classList.remove('dark-mode');
-            this.articleContent.classList.remove('night-code-theme');
-            this.iconDom.className = 'fas fa-moon';
+            this.enableDarkMode();
           } else {
-            document.body.classList.add('dark-mode');
-            this.articleContent.classList.add('night-code-theme');
-            this.iconDom.className = 'fas fa-sun';
+            this.enableLightMode();
           }
-
         }
-
+      } else {
+        // First time visit with no LocalStorage exists.
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          this.enableDarkMode();
+        } else {
+          this.enableLightMode();
+        }
       }
     },
 
     initModeToggleButton() {
       this.modeToggleButton_dom.addEventListener('click', () => {
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          this.setItemUtil('light-mode', 'dark');
+          this.setItemUtil('light-mode');
         } else {
-          this.setItemUtil('dark-mode', 'light');
+          this.setItemUtil('dark-mode');
         }
       });
+    },
+
+    initModeAutoTrigger() {
+      const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+      darkMode && darkMode.addEventListener('change', e => { 
+        if (e.matches) { 
+          this.enableDarkMode();
+        } else { 
+          this.enableLightMode();
+        } 
+      });
     }
   }
 
   KEEP.utils.modeToggle.initModeStatus();
   KEEP.utils.modeToggle.initModeToggleButton();
+  KEEP.utils.modeToggle.initModeAutoTrigger();
 
 };