💄 Add switch theme button function.

assets/css/_colors.scss

@@ -1,4 +1,4 @@
-:root {
+:root:not([data-theme="dark"]) {
   // https://sass-lang.com/documentation/breaking-changes/css-vars
   --body-bg-color: #{$body-bg-color};
   --content-bg-color: #{$content-bg-color};
@@ -31,7 +31,7 @@
 
 @if $darkmode {
   @media (prefers-color-scheme: dark) {
-    :root {
+    :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};
@@ -74,3 +74,33 @@
     }
   }
 }
+
+:root[data-theme="dark"] {
+  --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;
+}

assets/js/next-boot.js

@@ -34,6 +34,7 @@ NexT.boot.registerEvents = function() {
 NexT.boot.refresh = function() {
 
   NexT.utils.calSiteInfo();
+  NexT.utils.regSwitchThemeBtn();
 
   if (!NexT.CONFIG.page.isPage) return;
  

assets/js/utils.js

@@ -23,6 +23,16 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
+  regSwitchThemeBtn: function() {
+    const switchThemeBtn = document.getElementById('switch-theme');
+    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);
+    });    
+  },
+
   domAddClass: function(selector, cls) {
     const doms = document.querySelectorAll(selector);
     if (doms) {

layouts/partials/widgets.html

@@ -2,7 +2,7 @@
   <a id="goto-comments" class="button goto-comments" href="#comments"  title="{{ T "ToolBtns.comment" }}">
     <i class="fas fa-comments"></i>
   </a> 
-  <div class="button" title="{{ T "ToolBtns.theme" }}">
+  <div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
     <i class="fas fa-adjust"></i>
   </div> 
   {{ if .Site.Params.footer.translate }}