🐛 Fixed toggle theme color will refresh page.

assets/css/_common/components/tool-buttons.scss

@@ -41,7 +41,7 @@
   }
 
   .goto-comments {
-      display: none;
+    display: none;
   }
 
   .goto-comments-on {

assets/js/next-boot.js

@@ -1,11 +1,6 @@
 /* global NexT, CONFIG */
-
 NexT.boot = {};
 
-NexT.boot.activeThemeMode = function(){
-  NexT.utils.activeThemeMode();
-};
-
 NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
@@ -39,13 +34,10 @@ NexT.boot.registerEvents = function() {
 NexT.boot.refresh = function() {
 
   NexT.utils.calSiteInfo();
-  NexT.utils.regSwitchThemeBtn();
 
   if (!NexT.CONFIG.page.isPage) return;
  
   NexT.utils.registerSidebarTOC();
-
-  //NexT.utils.replacePostCRLink();
   NexT.utils.registerCopyCode();
   NexT.utils.registerPostReward();
   if(NexT.CONFIG.page.comments) {    
@@ -89,7 +81,6 @@ NexT.boot.motion = function() {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-  NexT.boot.activeThemeMode();
   NexT.boot.registerEvents();
   NexT.boot.motion();
   NexT.boot.refresh();

assets/js/utils.js

@@ -22,10 +22,11 @@ HTMLElement.prototype.wrap = function (wrapper) {
 })();
 
 NexT.utils = {
-
   registerToolButtons: function () {
-    const buttons = document.querySelectorAll('.tool-buttons div:nth-child(n+2)');
+    const buttons = document.querySelector('.tool-buttons');
-    buttons.forEach(button => {
+    
+    const scrollbar_buttons = buttons.querySelectorAll('div:not(#toggle-theme)');
+    scrollbar_buttons.forEach(button => {
       let targetId = button.id;
       if (targetId != '') {
         targetId = targetId.substring(5);
@@ -34,6 +35,12 @@ NexT.utils = {
         NexT.utils.slidScrollBarAnime(targetId);
       });
     });
+
+    buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
+      const cur_theme = document.documentElement.getAttribute('data-theme');
+      console.log();
+      window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
+    });
   },
 
   slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
@@ -45,79 +52,6 @@ NexT.utils = {
     });
   },
 
-  regSwitchThemeBtn: function () {
-    const switchThemeBtn = document.getElementById('switch-theme');
-    if (!switchThemeBtn) return;
-    switchThemeBtn.addEventListener('click', () => {
-      const colorTheme = document.documentElement.getAttribute('data-theme');
-      NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
-
-    });
-  },
-
-  activeThemeMode: function () {
-    const useDark = window.matchMedia("(prefers-color-scheme: dark)");
-    let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
-    const localState = NexT.utils.getLocalStorage('theme');
-    if (localState == 'light'
-      || (localState == undefined && !NexT.CONFIG.darkmode)) {
-      darkModeState = false;
-    }
-    NexT.utils.toggleDarkMode(darkModeState);
-
-    useDark.addListener(function (evt) {
-      NexT.utils.toggleDarkMode(evt.matches);
-    });
-  },
-
-  toggleDarkMode: function (state) {
-    if (state) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      NexT.utils.setLocalStorage('theme', 'dark', 2);
-    } else {
-      document.documentElement.setAttribute('data-theme', 'light');
-      NexT.utils.setLocalStorage('theme', 'light', 2);
-    }
-
-    const theme = state ? 'dark' : 'light';
-    NexT.utils.toggleGiscusDarkMode(theme);
-  },
-
-  toggleGiscusDarkMode: function (theme) {
-    const iframe = document.querySelector('iframe.giscus-frame');
-    if (iframe) {
-      const config = { setConfig: { theme: theme } };
-      iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
-    }
-  },
-
-  setLocalStorage: function (key, value, ttl) {
-    if (ttl === 0) return;
-    const now = new Date();
-    const expiryDay = ttl * 86400000;
-    const item = {
-      value: value,
-      expiry: now.getTime() + expiryDay
-    };
-    localStorage.setItem(key, JSON.stringify(item));
-  },
-
-  getLocalStorage: function (key) {
-    const itemStr = localStorage.getItem(key);
-    if (!itemStr) {
-      return undefined;
-    }
-
-    const item = JSON.parse(itemStr);
-    const now = new Date();
-
-    if (now.getTime() > item.expiry) {
-      localStorage.removeItem(key);
-      return undefined;
-    }
-    return item.value;
-  },
-
   domAddClass: function (selector, cls) {
     const doms = document.querySelectorAll(selector);
     if (doms) {

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
   {{- $.Scratch.Set $k $v -}}
 {{- end -}}
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}" data-theme="{{ .Scratch.Get "theme" }}">
 
 <head>
   {{- partial "head.html" . }}

layouts/partials/head.html

@@ -5,6 +5,61 @@
 {{- partial "head/facebook.html" . }}
 {{- partialCached "head/verify.html" . }}
 {{- partialCached "head/style.html" . }}
+<script type="text/javascript">
+(function(){
+  localDB = {
+    set: function (key, value, ttl) {
+      if (ttl === 0) return;
+      const now = new Date();
+      const expiryDay = ttl * 86400000;
+      const item = {
+        value: value,
+        expiry: now.getTime() + expiryDay
+      };
+      localStorage.setItem(key, JSON.stringify(item));
+    },
+    get: function (key) {
+      const itemStr = localStorage.getItem(key);
+      if (!itemStr) {
+        return undefined;
+      }
+  
+      const item = JSON.parse(itemStr);
+      const now = new Date();
+  
+      if (now.getTime() > item.expiry) {
+        localStorage.removeItem(key);
+        return undefined;
+      }
+      return item.value;
+    }
+  };
+
+  theme = {
+    active: function() {
+      const localState = localDB.get('theme');
+      if (localState == undefined) return;
+      theme.toggle(localState);
+      window.matchMedia("(prefers-color-scheme: dark)").addListener(function (evt) {
+        theme.toggle(evt.matches ? 'dark' : 'light');
+      });
+    },
+
+    toggle: function (theme) {
+      document.documentElement.setAttribute('data-theme',  theme);
+      localDB.set('theme', theme, 2);
+      
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (iframe) {
+        const config = { setConfig: { theme: theme } };
+        iframe.contentWindow.postMessage({ giscus: config }, 'https://giscus.app');
+      }
+    }
+  };
+
+  theme.active();
+})(window);
+</script>
 {{- partial "head/config.html" . }}
 {{- partialCached "head/analytics.html" . }}
 

layouts/partials/init.html

@@ -122,4 +122,10 @@
   {{ end }}
 {{ end }}
 
+{{ $theme := "light" }}
+{{ if .Site.Params.darkmode }}
+  {{ $theme = "dark" }}
+{{ end }}
+{{ $globalVars.Set "theme" $theme }}
+
 {{ return $globalVars.Values }}

layouts/partials/widgets.html

@@ -1,7 +1,4 @@
-<div class="tool-buttons" > 
+<div class="tool-buttons" >
-  <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
-    <i class="fas fa-adjust"></i>
-  </div>
   <div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
     <i class="fas fa-comments"></i>
   </div> 
@@ -10,6 +7,9 @@
     <i class="fas fa-globe"></i>
   </div> 
   {{ end }}
+  <div id="toggle-theme" class="button" title="{{ T "ToolBtns.theme" }}">
+    <i class="fas fa-adjust"></i>
+  </div>
   {{- if and .Site.Params.backTop.enable (not .Site.Params.backTop.sidebar) }}
   <div class="back-to-top" role="button" title="{{ T "ToolBtns.backTop" }}">
     <i class="fa fa-arrow-up"></i>