主题系统

miniTab 提供了完整的明暗主题系统，让你可以根据个人喜好、使用环境和系统设置选择最舒适的视觉体验。

主题选项

🌞 明亮主题

• 设计理念: 清新、简洁的白色调设计
• 适用场景: 白天使用、办公环境、明亮房间
• 视觉特点:
  • 白色或浅色背景
  • 深色文字和图标
  • 清晰的对比度
  • 专业的视觉效果

🌙 黑暗主题

• 设计理念: 优雅、现代的深色调设计
• 适用场景: 夜晚使用、暗光环境、护眼需求
• 视觉特点:
  • 深色或黑色背景
  • 浅色文字和图标
  • 柔和的对比度
  • 减少眼部疲劳

🖥️ 跟随系统

• 智能检测: 自动检测操作系统的主题偏好
• 实时切换: 系统主题改变时立即同步
• 默认选项: 推荐的默认设置
• 无需手动: 完全自动化的主题管理

主题切换

手动切换

1. 通过设置面板:

   • 点击右上角的 ⚙️ 设置按钮
   • 在"主题设置"部分选择偏好
   • 选项包括：明亮、黑暗、跟随系统

2. 快速切换:

   • 设置中的主题切换按钮
   • 点击可在明暗主题间快速切换
   • 实时预览效果

自动切换

系统跟随模式

• OS检测: 检测 Windows、macOS、Linux 的主题设置
• 实时同步: prefers-color-scheme CSS媒体查询
• 事件监听: 监听系统主题变化事件
• 即时生效: 无需刷新页面即可应用

时间自动切换（计划功能）

• 日出日落: 根据地理位置计算日出日落时间
• 自定义时段: 设置特定时间段的主题
• 工作模式: 工作时间使用明亮主题

视觉设计

🎨 颜色系统

明亮主题色彩

主背景: #ffffff (纯白)
次背景: #f8fafc (浅灰)
卡片背景: #ffffff (白色)
主文字: #1e293b (深灰蓝)
次文字: #64748b (中灰)
边框: #e2e8f0 (浅灰)
强调色: #3b82f6 (蓝色)

黑暗主题色彩

主背景: #0f172a (深蓝黑)
次背景: #1e293b (灰蓝)
卡片背景: #334155 (中灰蓝)
主文字: #f1f5f9 (浅白)
次文字: #cbd5e1 (浅灰)
边框: #475569 (中灰)
强调色: #60a5fa (亮蓝)

✨ 动画效果

主题切换动画

• 平滑过渡: 0.3秒的CSS过渡动画
• 颜色渐变: 所有颜色属性同步过渡
• 无闪烁: 避免切换时的视觉跳跃
• 流畅体验: 保持界面响应性

组件适配

• 图标变化: SVG图标颜色自动适配
• 卡片阴影: 阴影效果根据主题调整
• 边框样式: 边框颜色和透明度自动调整

组件适配

🧩 界面元素适配

天气卡片

• 明亮模式: 白色背景，深色文字，淡蓝色强调
• 黑暗模式: 深色背景，浅色文字，亮蓝色强调
• 天气图标: 自动适配的彩色天气图标

搜索栏

• 输入框: 背景色和边框颜色自动调整
• 占位符: 文字颜色根据主题变化
• 焦点状态: 聚焦时的强调色效果

书签卡片

• 卡片背景: 适配主题的背景色
• 文字颜色: 自动调整可读性
• 悬停效果: 鼠标悬停时的颜色变化
• 文件夹图标: 图标颜色智能适配

🔧 设置面板

• 面板背景: 毛玻璃效果适配主题
• 控件样式: 开关、按钮自动适配
• 分组线条: 分割线颜色调整

技术实现

🛠️ CSS变量系统

颜色变量定义

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --accent-color: #3b82f6;
}

[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border-color: #475569;
  --accent-color: #60a5fa;
}

主题检测逻辑

// 检测系统主题
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')

// 监听主题变化
prefersDark.addListener((e) => {
  if (theme === 'system') {
    updateTheme(e.matches ? 'dark' : 'light')
  }
})

💾 持久化存储

主题设置存储

• Chrome Storage: 使用扩展本地存储
• 跨设备同步: 利用Chrome账户同步
• 默认值: 初始化时的默认主题设置

状态管理

• React Hook: 自定义useTheme Hook
• 全局状态: 整个应用的主题状态管理
• 实时更新: 状态变化时的界面实时更新

自定义选项

🎨 高级自定义（规划中）

自定义颜色

• 主色调: 选择个人喜好的主要颜色
• 强调色: 自定义强调和链接颜色
• 背景色: 调整背景颜色深浅

字体设置

• 字体大小: 调整界面文字大小
• 字体族: 选择不同的字体风格
• 行高: 调整文字行间距

📱 响应式适配

屏幕尺寸适配

• 桌面端: 完整的主题效果
• 平板端: 适配的组件大小和间距
• 手机端: 优化的移动端主题

高DPI适配

• Retina显示: 高分辨率屏幕优化
• 图标清晰度: 矢量图标确保清晰
• 文字渲染: 优化的文字显示效果

最佳实践

👀 视觉舒适度

使用建议

1. 白天使用: 建议使用明亮主题或跟随系统
2. 夜晚使用: 推荐黑暗主题减少眼部疲劳
3. 长时间工作: 黑暗主题有助于减少屏幕亮度

健康提示

• 定期休息: 无论使用何种主题都应定期休息眼部
• 环境光线: 调整屏幕亮度匹配环境光线
• 个人偏好: 选择最舒适的主题设置

⚙️ 性能优化

CSS优化

• 变量系统: 使用CSS自定义属性减少重复
• 硬件加速: 利用GPU加速主题切换动画
• 最小重排: 避免引起布局重新计算的属性变化

JavaScript优化

• 事件防抖: 避免频繁的主题切换操作
• 异步更新: 非阻塞的主题应用
• 内存管理: 及时清理主题相关的事件监听器

无障碍支持

♿ 可访问性

对比度保证

• WCAG标准: 符合Web内容无障碍指南
• 高对比度: 确保文字和背景有足够对比度
• 色盲友好: 不仅仅依赖颜色传达信息

屏幕阅读器

• 语义标记: 正确的HTML语义结构
• ARIA属性: 适当的ARIA标签和属性
• 主题状态: 屏幕阅读器可识别当前主题状态

---

主题系统让你可以根据个人喜好和使用环境选择最适合的视觉体验。无论是专业的工作环境还是轻松的浏览体验，都能找到最舒适的主题设置。