💄 Add comments active dark & light model.

assets/css/_colors.scss

@@ -1,4 +1,4 @@
-:root:not([data-theme="dark"]) {
+:root {
   // https://sass-lang.com/documentation/breaking-changes/css-vars
   --body-bg-color: #{$body-bg-color};
   --content-bg-color: #{$content-bg-color};
@@ -29,52 +29,6 @@
   color-scheme: light;
 }
 
-@if $darkmode {
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) {
-      --body-bg-color: #{$body-bg-color-dark};
-      --content-bg-color: #{$content-bg-color-dark};
-      --card-bg-color: #{$card-bg-color-dark};
-      --text-color: #{$text-color-dark};
-      --blockquote-color: #{$blockquote-color-dark};
-      --link-color: #{$link-color-dark};
-      --link-hover-color: #{$link-hover-color-dark};
-      --brand-color: #{$brand-color-dark};
-      --brand-hover-color: #{$brand-hover-color-dark};
-      --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
-      --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
-      --menu-item-bg-color: #{$menu-item-bg-color-dark};
-      --theme-color: #{$theme-color-dark};
-
-      --btn-default-bg: #{$btn-default-bg-dark};
-      --btn-default-color: #{$btn-default-color-dark};
-      --btn-default-border-color: #{$btn-default-border-color-dark};
-      --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
-      --btn-default-hover-color: #{$btn-default-hover-color-dark};
-      --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
-
-      --highlight-background: #{$highlight-background-dark};
-      --highlight-foreground: #{$highlight-foreground-dark};
-      --highlight-gutter-background: #{$highlight-gutter-background-dark};
-      --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
-
-      color-scheme: dark;
-    }
-
-    img {
-      opacity: .75;
-
-      &:hover {
-        opacity: .9;
-      }
-    }
-
-    iframe {
-      color-scheme: light;
-    }
-  }
-}
-
 :root[data-theme="dark"] {
   --body-bg-color: #{$body-bg-color-dark};
   --content-bg-color: #{$content-bg-color-dark};
@@ -104,3 +58,15 @@
 
   color-scheme: dark;
 }
+
+img[data-theme="dark"] {
+  opacity: .75;
+
+  &:hover {
+    opacity: .9;
+  }
+}
+
+iframe[data-theme="dark"] {
+  color-scheme: light;
+}

assets/js/next-boot.js

@@ -2,6 +2,10 @@
 
 NexT.boot = {};
 
+NexT.boot.activeThemeMode = function(){
+  NexT.utils.activeThemeMode();
+};
+
 NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
@@ -84,6 +88,7 @@ NexT.boot.motion = function() {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
+  NexT.boot.activeThemeMode();
   NexT.boot.registerEvents();
   NexT.boot.motion();
   NexT.boot.refresh();

assets/js/third-party/comments/waline.js

@@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
         requiredMeta  : requiredmeta,
         serverURL     : serverurl,
         lang          : NexT.CONFIG.lang,
-        dark          : "auto"
+        dark          : 'html[data-theme="dark"]'
       });
 
       NexT.utils.hiddeLodingCmp(element);

assets/js/utils.js

@@ -28,11 +28,74 @@ NexT.utils = {
     if (!switchThemeBtn) return;
     switchThemeBtn.addEventListener('click', () => {
       const colorTheme = document.documentElement.getAttribute('data-theme');
-      const theme = colorTheme == null ? 'dark' : colorTheme == 'dark' ? 'light' : 'dark';
-      document.documentElement.setAttribute('data-theme', theme);
+      NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
+
     });    
   },
 
+  activeThemeMode: function() {
+
+    const useDark = window.matchMedia("(prefers-color-scheme: dark)");
+    let darkModeState = useDark.matches;
+    const localState = NexT.utils.getLocalStorage('theme');
+    if (localState == 'light') {
+      darkModeState = false;
+    }
+    NexT.utils.toggleDarkMode(darkModeState);
+
+    useDark.addListener(function(evt) {
+      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) {

exampleSite/config.yaml

@@ -389,6 +389,9 @@ params:
   # Footer Settings
   # ---------------------------------------------------------------
   footer:
+    # 启动谷歌翻译功能
+    # Enable google translate in footer
+    translate: true
     # 站点开始年份，默认为当下时间的年份
     # Specify the year when the site was setup. 
     # If not defined, current year will be used.