lshcup.org/assets/script.js

// assets/script.js

// 主题切换功能
document.addEventListener("DOMContentLoaded", function () {
  // 获取主题切换按钮
  const themeToggle = document.getElementById("theme-toggle");
  const themeIcon = themeToggle.querySelector("i");

  // 检查本地存储的主题设置
  const currentTheme = localStorage.getItem("theme") || "light";
  document.documentElement.className = currentTheme;
  updateThemeIcon(currentTheme);

  // 主题切换事件
  themeToggle.addEventListener("click", function () {
    const currentTheme = document.documentElement.classList.contains("dark")
      ? "dark"
      : "light";
    const newTheme = currentTheme === "light" ? "dark" : "light";

    document.documentElement.className = newTheme;
    localStorage.setItem("theme", newTheme);
    updateThemeIcon(newTheme);
  });

  // 更新主题图标
  function updateThemeIcon(theme) {
    if (theme === "dark") {
      themeIcon.className = "fas fa-sun";
    } else {
      themeIcon.className = "fas fa-moon";
    }
  }

  // 移动端菜单切换
  const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
  const mobileMenu = document.getElementById("mobile-menu");

  if (mobileMenuToggle) {
    mobileMenuToggle.addEventListener("click", function () {
      mobileMenu.classList.toggle("hidden");
      const icon = this.querySelector("i");
      if (mobileMenu.classList.contains("hidden")) {
        icon.className = "fas fa-bars";
      } else {
        icon.className = "fas fa-times";
      }
    });
  }

  // 滚动动画
  const fadeElements = document.querySelectorAll(".fade-in");

  const fadeInOnScroll = function () {
    fadeElements.forEach((element) => {
      const elementTop = element.getBoundingClientRect().top;
      const elementVisible = 150;

      if (elementTop < window.innerHeight - elementVisible) {
        element.classList.add("visible");
      }
    });
  };

  // 初始检查
  fadeInOnScroll();

  // 滚动时检查
  window.addEventListener("scroll", fadeInOnScroll);

  // 关闭移动端菜单当点击菜单项
  const mobileMenuItems = document.querySelectorAll("#mobile-menu a");
  mobileMenuItems.forEach((item) => {
    item.addEventListener("click", function () {
      mobileMenu.classList.add("hidden");
      mobileMenuToggle.querySelector("i").className = "fas fa-bars";
    });
  });
});

// 暗色主题样式
const darkThemeStyles = `
    .dark {
        --bg-color: #1a202c;
        --text-color: #e2e8f0;
        --card-bg: #2d3748;
        --border-color: #4a5568;
    }
    
    .dark body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    .dark .theme-transition {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    .dark .bg-white {
        background-color: var(--card-bg);
    }
    
    .dark .text-gray-800 {
        color: var(--text-color);
    }
    
    .dark .text-gray-600 {
        color: #cbd5e0;
    }
    
    .dark .bg-gray-50 {
        background-color: #2d3748;
    }
    
    .dark .bg-gray-100 {
        background-color: #4a5568;
    }
    
    .dark .border-gray-700 {
        border-color: #4a5568;
    }
    
    .dark .shadow-md, .dark .shadow-lg {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
`;

// 添加暗色主题样式到文档
const styleSheet = document.createElement("style");
styleSheet.textContent = darkThemeStyles;
document.head.appendChild(styleSheet);