添加明暗模式切换器 (Add Dark/Light Mode Switcher)

[Copilot]

概述 (Overview)

实现了完整的明暗模式切换功能，允许用户在浅色和深色主题之间无缝切换，并自动保存用户偏好设置。

Implemented a complete dark/light mode switcher that allows users to seamlessly toggle between light and dark themes with automatic preference persistence.

✨ 新功能 (New Features)

🎨 主题系统 (Theme System)

• 基于 CSS 自定义属性的统一主题系统
• 所有组件间的颜色一致性
• 平滑的主题切换过渡效果 (0.3s ease)
• 支持桌面端和移动端布局

🌓 主题切换按钮 (Theme Toggle)

• 位于右上角的交互式太阳/月亮图标按钮
• 动态图标切换（浅色模式显示太阳，深色模式显示月亮）
• 悬停效果和视觉反馈

💾 偏好持久化 (Preference Persistence)

• localStorage 集成，记住用户主题偏好
• 页面重新加载时自动恢复主题设置

🎨 配色方案 (Color Schemes)

浅色主题 (Light Theme):

• 背景色: #f5f0d3 (温暖的米色)
• 边框色: #692612 (深棕色)
• 文字色: #000000 (黑色)

深色主题 (Dark Theme):

• 背景色: #2a2a2a (深灰色)
• 边框色: #8b4513 (棕色强调)
• 文字色: #ffffff (白色)

🔧 技术实现 (Technical Implementation)

CSS 变量系统

:root {
  --frameBg: #f5f0d3;
  --borderColor: #692612;
  --textColor: #000000;
  --bgColor: #ffffff;
  --sidebarBg: #ffffff;
}

:root[data-theme="dark"] {
  --frameBg: #2a2a2a;
  --borderColor: #8b4513;
  --textColor: #ffffff;
  --bgColor: #1a1a1a;
  --sidebarBg: #333333;
}

扩展的 SwitchStyle 类

class SwitchStyle {
  initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    this.setTheme(savedTheme);
  }

  toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    this.setTheme(newTheme);
  }
}

📱 界面截图 (UI Screenshots)

浅色主题 (Light Theme):

深色主题 (Dark Theme):

🛠️ 使用方法 (Usage)

用户可以通过点击右上角的太阳/月亮图标在主题间切换。选择的主题会自动保存并在后续访问时恢复。

Users can toggle between themes by clicking the sun/moon icon in the top-right corner. The selected theme is automatically saved and restored on subsequent visits.

📁 修改的文件 (Modified Files)

• src/SwitchStyle.ts - 扩展主题切换功能
• src/css/desktop/Common.scss - 添加 CSS 变量和 z-index
• src/css/mobile/Common.scss - 移动端 CSS 变量
• src/css/desktop/MainPage.scss - 桌面端主题样式
• src/css/mobile/MainPage.scss - 移动端主题样式
• src/css/desktop/Sidebar.scss - 侧边栏主题适配
• src/css/mobile/Sidebar.scss - 移动端侧边栏适配
• bin/index.html - 添加主题切换按钮
• src/index.ts - 集成 SwitchStyle 类
• src/libs.d.ts - 增强 TypeScript 类型定义

⚡ 性能优化 (Performance)

• 使用 CSS 自定义属性避免重复的样式定义
• 平滑过渡效果提升用户体验
• localStorage 减少服务器请求
• 最小化 DOM 操作

🧪 测试 (Testing)

已通过功能演示验证：

• ✅ 主题切换功能正常
• ✅ 图标动态更新
• ✅ 偏好设置持久化
• ✅ 响应式设计兼容
• ✅ 平滑过渡效果

Verified through functional demo:

• ✅ Theme switching works correctly
• ✅ Icons update dynamically
• ✅ Preferences persist properly
• ✅ Responsive design compatibility
• ✅ Smooth transition effects

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: npm install (dns block)
  • Triggering command: npm install mime-types (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.