🐛 Fixed toggle theme color will refresh page.

2022-10-23 16:05:23 +08:00
parent 1ae0ca2488
commit 913ae1821a
7 changed files with 77 additions and 91 deletions
--- a/layouts/_default/baseof.html
+++ b/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" . }}
--- a/layouts/partials/head.html
+++ b/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" . }}

--- a/layouts/partials/init.html
+++ b/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 }}
--- a/layouts/partials/widgets.html
+++ b/layouts/partials/widgets.html
@@ -1,7 +1,4 @@
-<div class="tool-buttons" > 
-  <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
-    <i class="fas fa-adjust"></i>
-  </div>
+<div class="tool-buttons" >
  <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>