From d4730f89d2f70afbc7517fb047fc1247231986af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= <elkan1788@139.com>
Date: Mon, 26 Sep 2022 21:54:03 +0800
Subject: [PATCH] :lipstick: Add switch theme button function.

---
 assets/css/_colors.scss       | 34 ++++++++++++++++++++++++++++++++--
 assets/js/next-boot.js        |  1 +
 assets/js/utils.js            | 10 ++++++++++
 layouts/partials/widgets.html |  2 +-
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
index 391f348..b8efc4e 100644
--- a/assets/css/_colors.scss
+++ b/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;
+}
diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js
index fbfd792..e43c104 100644
--- a/assets/js/next-boot.js
+++ b/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;
  
diff --git a/assets/js/utils.js b/assets/js/utils.js
index 09638c7..70558a2 100644
--- a/assets/js/utils.js
+++ b/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) {
diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html
index 26a7214..37ac5c5 100644
--- a/layouts/partials/widgets.html
+++ b/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 }}