From 96286031ffaccc5928ce15c13c04dcbaf30b4878 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Sun, 24 Jan 2021 19:54:44 +0800
Subject: [PATCH] perf: optimize dark and light mode toggle

---
 source/css/common/codeblock/code-theme.styl |  1 +
 source/css/common/variables.styl            | 11 +--
 source/js/dark-light-toggle.js              | 78 ++++++---------------
 source/js/main.js                           |  4 +-
 4 files changed, 29 insertions(+), 65 deletions(-)

diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/codeblock/code-theme.styl
index 042aea1..717b6a5 100644
--- a/source/css/common/codeblock/code-theme.styl
+++ b/source/css/common/codeblock/code-theme.styl
@@ -56,6 +56,7 @@ code-theme(mode) {
   code-theme('light');
 }
 
+
 @media (prefers-color-scheme: dark) {
   :root {
     code-theme('dark');
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index 8a38319..603bde8 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -136,22 +136,23 @@ 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');
 }
 
+
 .dark-mode {
   root-color('dark');
 }
diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js
index 3c5f4c7..f178ccf 100644
--- a/source/js/dark-light-toggle.js
+++ b/source/js/dark-light-toggle.js
@@ -1,88 +1,51 @@
+/* global KEEP */
+
 KEEP.initModeToggle = () => {
 
   KEEP.utils.modeToggle = {
 
-    localStorageKey: 'KEEP',
     modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
     iconDom: document.querySelector('.tool-dark-light-toggle i'),
-    articleContent: document.querySelector('.main-content'),
-
-    setItemUtil(modeClass) {
-      const isDark = document.body.className.indexOf('light-mode') === -1;
-      let currentScheme = "";
-      if (isDark) {
-        this.enableLightMode();
-        currentScheme = "light";
-      } else {
-        this.enableDarkMode();
-        currentScheme = "dark";
-      }
-      localStorage.setItem(this.localStorageKey, JSON.stringify(
-        {
-          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';
+      KEEP.styleStatus.isDark = false;
+      KEEP.setStyleStatus();
     },
 
     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';
+      KEEP.styleStatus.isDark = true;
+      KEEP.setStyleStatus();
+    },
+
+    isDarkPrefersColorScheme() {
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
     },
 
     initModeStatus() {
-      this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey));
-      if (this.modeConfig) {
-        if (this.modeConfig.prefersColorScheme === 'dark') {
-          if (this.modeConfig.isDark) {
-            this.enableDarkMode();
-          } else {
-            this.enableLightMode();
-          }
-        } else {
-          if (this.modeConfig.isDark) {
-            this.enableDarkMode();
-          } else {
-            this.enableLightMode();
-          }
-        }
+      const styleStatus = KEEP.getStyleStatus();
+
+      if (styleStatus) {
+        styleStatus.isDark ? this.enableDarkMode() : 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();
-        }
+        this.isDarkPrefersColorScheme().matches ? this.enableDarkMode() : this.enableLightMode();
       }
     },
 
     initModeToggleButton() {
       this.modeToggleButton_dom.addEventListener('click', () => {
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          this.setItemUtil('light-mode');
-        } else {
-          this.setItemUtil('dark-mode');
-        }
+        const isDark = document.body.classList.contains('dark-mode');
+        isDark ? this.enableLightMode() : this.enableDarkMode();
       });
     },
 
     initModeAutoTrigger() {
-      const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
-      darkMode && darkMode.addEventListener('change', e => {
-        if (e.matches) {
-          this.enableDarkMode();
-        } else {
-          this.enableLightMode();
-        }
+      const isDarkMode = this.isDarkPrefersColorScheme();
+      isDarkMode.addEventListener('change', e => {
+        e.matches ? this.enableDarkMode() : this.enableLightMode();
       });
     }
   }
@@ -90,5 +53,4 @@ KEEP.initModeToggle = () => {
   KEEP.utils.modeToggle.initModeStatus();
   KEEP.utils.modeToggle.initModeToggleButton();
   KEEP.utils.modeToggle.initModeAutoTrigger();
-
 };
diff --git a/source/js/main.js b/source/js/main.js
index 512098c..9e81ae6 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -12,9 +12,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
   KEEP.styleStatus = {
     isExpandPageWidth: false,
-    prefersColorScheme: 'light',
     isDark: false,
-    fontSizeLevel: 0
+    fontSizeLevel: 0,
+    isOpenPageAside: true
   }
 
   // print theme base info