feat(theme): 主题优化

theme-terminal/src/custom.ts

@@ -1,3 +1,4 @@
+// 文字打字机效果
 export const typewriterEffect = (selectors: string) => {
   const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
 
@@ -21,3 +22,24 @@ 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);
+  };
+}

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')
 })

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>