feat(主题): 添加主题切换功能并优化导航栏样式

ExquisiteCore · ExquisiteCore · commit b769ffebd439 · 2025-05-12T22:47:42.000+08:00
在布局文件中添加主题切换逻辑，支持根据用户偏好或系统设置自动应用主题。新增主题切换组件，优化导航栏样式，支持动态高亮当前页面链接。
diff --git a/blog-web/src/components/Header.astro b/blog-web/src/components/Header.astro
@@ -1,5 +1,18 @@
 ---
 import ScrollHeader from "../components/solid/ScrollHeader";
+import ThemeToggle from "../components/solid/ThemeToggle";
+
+// Get current path to highlight active navigation item
+const currentPath = Astro.url.pathname;
+const isHomePage = currentPath === "/";
+const isBlogPage = currentPath.startsWith("/blog");
+const isAboutPage = currentPath.startsWith("/about");
+const isProjectsPage = currentPath.startsWith("/projects");
+
+// Helper function to determine tab classes
+const getTabClass = (isActive: boolean) => {
+  return isActive ? "tab tab-active" : "tab";
+};
 ---
 
 <ScrollHeader client:load>
@@ -25,48 +38,26 @@ import ScrollHeader from "../components/solid/ScrollHeader";
                     tabindex="0"
                     class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
                 >
-                    <li><a href="/">首页</a></li>
-                    <li><a href="/blog">博客</a></li>
-                    <li><a href="/about">关于我</a></li>
-                    <li><a href="/projects">项目</a></li>
+                    <li><a href="/" class={isHomePage ? "font-bold text-primary" : ""}>首页</a></li>
+                    <li><a href="/blog" class={isBlogPage ? "font-bold text-primary" : ""}>博客</a></li>
+                    <li><a href="/about" class={isAboutPage ? "font-bold text-primary" : ""}>关于我</a></li>
+                    <li><a href="/projects" class={isProjectsPage ? "font-bold text-primary" : ""}>项目</a></li>
                 </ul>
             </div>
             <a href="/" class="btn btn-ghost text-xl">
                 <span class="font-bold transition-all">ExquisiteCore</span>
             </a>
         </div>
         <div class="navbar-center hidden lg:flex">
-            <ul class="menu menu-horizontal px-1">
-                <li><a href="/">首页</a></li>
-                <li><a href="/blog">博客</a></li>
-                <li><a href="/about">关于我</a></li>
-                <li><a href="/projects">项目</a></li>
-            </ul>
+            <div role="tablist" class="tabs tabs-bordered">
+                <a href="/" role="tab" class={getTabClass(isHomePage)}>首页</a>
+                <a href="/blog" role="tab" class={getTabClass(isBlogPage)}>博客</a>
+                <a href="/about" role="tab" class={getTabClass(isAboutPage)}>关于我</a>
+                <a href="/projects" role="tab" class={getTabClass(isProjectsPage)}>项目</a>
+            </div>
         </div>
         <div class="navbar-end">
-            <label class="swap swap-rotate btn btn-ghost btn-circle">
-                <input type="checkbox" class="theme-controller" value="dark" />
-                <!-- Sun icon -->
-                <svg
-                    class="swap-on fill-current w-5 h-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-                    ></path>
-                </svg>
-                <!-- Moon icon -->
-                <svg
-                    class="swap-off fill-current w-5 h-5"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-                    ></path>
-                </svg>
-            </label>
+            <ThemeToggle client:load />
             <button class="btn btn-primary ml-2">登录</button>
         </div>
     </div>
diff --git a/blog-web/src/components/solid/ScrollHeader.jsx b/blog-web/src/components/solid/ScrollHeader.jsx
@@ -1,9 +1,10 @@
-import { createSignal, createEffect, onCleanup, onMount } from "solid-js";
+import { createSignal, createEffect, onCleanup, onMount, createMemo } from "solid-js";
 
 export default function ScrollHeader(props) {
   const [isVisible, setIsVisible] = createSignal(true);
   const [lastScrollY, setLastScrollY] = createSignal(0);
   const [isAtTop, setIsAtTop] = createSignal(true);
+  const [theme, setTheme] = createSignal('light');
   
   // Handle scroll events with debounce
   const handleScroll = () => {
@@ -50,11 +51,26 @@ export default function ScrollHeader(props) {
     }
   };
   
+  // Listen for theme changes in localStorage
+  const handleStorageChange = (e) => {
+    if (typeof localStorage !== 'undefined' && e.key === 'theme') {
+      setTheme(e.newValue || 'light');
+    }
+  };
+
   onMount(() => {
     // Set initial scroll position
     setLastScrollY(window.scrollY);
     // Initialize header state
     handleScroll();
+    
+    // Set initial theme from localStorage (only available in browser)
+    if (typeof localStorage !== 'undefined') {
+      setTheme(localStorage.getItem('theme') || 'light');
+    }
+    
+    // Listen for theme changes from other components
+    window.addEventListener('storage', handleStorageChange);
   });
   
   createEffect(() => {
@@ -64,15 +80,23 @@ export default function ScrollHeader(props) {
     onCleanup(() => {
       // Remove scroll event listener
       window.removeEventListener("scroll", onScroll);
+      window.removeEventListener('storage', handleStorageChange);
     });
   });
   
+  // Theme-based background color class
+  const bgColorClass = createMemo(() => {
+    return theme() === 'dark' 
+      ? 'bg-base-100/80 backdrop-blur-sm shadow-md' 
+      : 'bg-base-100/95 backdrop-blur-sm shadow-md';
+  });
+  
   return (
     <header
       class={`fixed top-0 w-full z-50 transition-all duration-300 transform ${
         isVisible() ? "translate-y-0" : "-translate-y-full"
       } ${
-        !isAtTop() ? "bg-base-100/95 backdrop-blur-sm shadow-md" : "bg-base-100"
+        !isAtTop() ? bgColorClass() : "bg-base-100"
       }`}
     >
       {props.children}
diff --git a/blog-web/src/components/solid/ThemeToggle.jsx b/blog-web/src/components/solid/ThemeToggle.jsx
@@ -0,0 +1,62 @@
+import { createSignal, onMount } from "solid-js";
+
+export default function ThemeToggle() {
+  const [isDarkMode, setIsDarkMode] = createSignal(false);
+  
+  // Initialize theme based on localStorage or system preference
+  onMount(() => {
+    if (typeof localStorage !== 'undefined') {
+      const savedTheme = localStorage.getItem('theme');
+      if (savedTheme === 'dark') {
+        setIsDarkMode(true);
+      } else if (savedTheme === 'light') {
+        setIsDarkMode(false);
+      } else {
+        // Check system preference if no saved preference
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setIsDarkMode(prefersDark);
+        localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
+      }
+    }
+  });
+  
+  // Handle theme toggle
+  const toggleTheme = () => {
+    const newTheme = !isDarkMode();
+    setIsDarkMode(newTheme);
+    
+    // Update theme in localStorage and document
+    const themeName = newTheme ? 'dark' : 'light';
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('theme', themeName);
+    }
+    document.documentElement.setAttribute('data-theme', themeName);
+  };
+  
+  return (
+    <label class="swap swap-rotate btn btn-ghost btn-circle">
+      <input 
+        type="checkbox" 
+        class="theme-controller" 
+        checked={isDarkMode()} 
+        onChange={toggleTheme} 
+      />
+      {/* Sun icon */}
+      <svg
+        class="swap-on fill-current w-5 h-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+      </svg>
+      {/* Moon icon */}
+      <svg
+        class="swap-off fill-current w-5 h-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+      </svg>
+    </label>
+  );
+}
diff --git a/blog-web/src/layouts/Layout.astro b/blog-web/src/layouts/Layout.astro
@@ -12,13 +12,31 @@ const { title = "My Blog" } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="zh-CN" data-theme="light">
+<html lang="zh-CN">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
+        <script is:inline>
+            // Apply saved theme immediately to prevent flash
+            try {
+                const savedTheme = localStorage.getItem('theme');
+                if (savedTheme) {
+                    document.documentElement.setAttribute('data-theme', savedTheme);
+                } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                    localStorage.setItem('theme', 'dark');
+                } else {
+                    document.documentElement.setAttribute('data-theme', 'light');
+                    localStorage.setItem('theme', 'light');
+                }
+            } catch (e) {
+                // Fallback for environments where localStorage is not available
+                document.documentElement.setAttribute('data-theme', 'light');
+            }
+        </script>
     </head>
     <body class="flex flex-col min-h-screen">
         <img
