From 051c1250f5491d36d56881a2db3917779f497eea Mon Sep 17 00:00:00 2001
From: rohow <rohow@foxmail.com>
Date: Thu, 22 Aug 2024 10:48:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E4=B8=BB=E9=A2=98=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme-terminal/src/custom.ts                 | 22 ++++++++++++++++++++
 theme-terminal/src/main.ts                   |  4 +++-
 theme-terminal/templates/modules/header.html | 19 -----------------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/theme-terminal/src/custom.ts b/theme-terminal/src/custom.ts
index ece9bcc..f1056ef 100644
--- a/theme-terminal/src/custom.ts
+++ b/theme-terminal/src/custom.ts
@@ -1,3 +1,4 @@
+// 文字打字机效果
 export const typewriterEffect = (selectors: string) => {
   const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
 
@@ -20,4 +21,25 @@ export const typewriterEffect = (selectors: string) => {
   }
 
   typewriter()
+}
+
+// 切换黑白主题
+export const handleToggleThemeMode = (selectors: string) => {
+  const toggleButton = document.querySelector<HTMLDivElement>(selectors);
+  
+  if(!toggleButton) return
+
+  const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  
+  if (storedTheme) document.documentElement.setAttribute("data-color-scheme", storedTheme);
+
+  toggleButton.onclick = function () {
+    const currentTheme = document.documentElement.getAttribute("data-color-scheme");
+
+    const targetTheme = currentTheme === "dark" ? "light" : "dark";
+
+    document.documentElement.setAttribute("data-color-scheme", targetTheme);
+    
+    localStorage.setItem("theme-mode", targetTheme);
+  };
 }
\ No newline at end of file
diff --git a/theme-terminal/src/main.ts b/theme-terminal/src/main.ts
index 54db756..7243f06 100644
--- a/theme-terminal/src/main.ts
+++ b/theme-terminal/src/main.ts
@@ -5,7 +5,7 @@ import './styles/font-hack.scss'
 
 import Alpine from 'alpinejs'
 import upvote from './upvote'
-import {typewriterEffect} from './custom'
+import {typewriterEffect, handleToggleThemeMode} from './custom'
 
 window.Alpine = Alpine
 
@@ -15,4 +15,6 @@ Alpine.start()
 
 document.addEventListener('DOMContentLoaded', () => {
   typewriterEffect('.typed-text')
+
+  handleToggleThemeMode('#theme-toggle')
 })
diff --git a/theme-terminal/templates/modules/header.html b/theme-terminal/templates/modules/header.html
index f271886..b439024 100644
--- a/theme-terminal/templates/modules/header.html
+++ b/theme-terminal/templates/modules/header.html
@@ -66,24 +66,5 @@
         </li>
       </ul>
     </nav>
-    <script>
-      var toggle = document.getElementById("theme-toggle");
-
-      var storedTheme =
-        localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-      if (storedTheme) document.documentElement.setAttribute("data-color-scheme", storedTheme);
-
-      toggle.onclick = function () {
-        var currentTheme = document.documentElement.getAttribute("data-color-scheme");
-        var targetTheme = "light";
-
-        if (currentTheme === "light") {
-          targetTheme = "dark";
-        }
-
-        document.documentElement.setAttribute("data-color-scheme", targetTheme);
-        localStorage.setItem("theme", targetTheme);
-      };
-    </script>
   </div>
 </header>