import { useState, useEffect } from "react"; export function useDarkMode() { // 初始设为 false,挂载后在 useEffect 中加载真实值 const [isDarkMode, setIsDarkMode] = useState(false); const [isInitialized, setIsInitialized] = useState(false); // 组件挂载后加载初始值(兼容 Tauri 环境) useEffect(() => { if (typeof window === "undefined") return; try { // 尝试读取已保存的偏好 const saved = localStorage.getItem("darkMode"); if (saved !== null) { const savedBool = saved === "true"; setIsDarkMode(savedBool); console.log("[DarkMode] Loaded from localStorage:", savedBool); } else { // 回退到系统偏好 const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; setIsDarkMode(prefersDark); console.log("[DarkMode] Using system preference:", prefersDark); } } catch (error) { console.error("[DarkMode] Error loading preference:", error); setIsDarkMode(false); } setIsInitialized(true); }, []); // 仅在首次挂载时运行 // 将 dark 类应用到文档根节点 useEffect(() => { if (!isInitialized) return; // 添加短暂延迟以确保 Tauri 中 DOM 已就绪 const timer = setTimeout(() => { try { if (isDarkMode) { document.documentElement.classList.add("dark"); console.log("[DarkMode] Added dark class to document"); } else { document.documentElement.classList.remove("dark"); console.log("[DarkMode] Removed dark class from document"); } // 检查类名是否已成功应用 const hasClass = document.documentElement.classList.contains("dark"); console.log("[DarkMode] Document has dark class:", hasClass); } catch (error) { console.error("[DarkMode] Error applying dark class:", error); } }, 0); return () => clearTimeout(timer); }, [isDarkMode, isInitialized]); // 将偏好保存到 localStorage useEffect(() => { if (!isInitialized) return; try { localStorage.setItem("darkMode", isDarkMode.toString()); console.log("[DarkMode] Saved to localStorage:", isDarkMode); } catch (error) { console.error("[DarkMode] Error saving preference:", error); } }, [isDarkMode, isInitialized]); const toggleDarkMode = () => { setIsDarkMode((prev) => { const newValue = !prev; console.log("[DarkMode] Toggling from", prev, "to", newValue); return newValue; }); }; return { isDarkMode, toggleDarkMode }; }