主题系统

逍遥图库支持亮色、暗色和自动三种主题模式。

主题模式

亮色模式

默认的浅色主题，适合白天使用。

暗色模式

深色主题，适合夜间使用，降低眼睛疲劳。

自动模式

跟随系统设置自动切换：

  • macOS/Windows 深色模式 → 暗色主题
  • macOS/Windows 浅色模式 → 亮色主题

切换方法

页面切换

点击页面右下角的主题切换按钮。

个人设置

在个人中心 → 设置 → 主题偏好中设置默认主题。

技术实现

CSS 变量

系统使用 CSS 变量实现主题切换：

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #1890ff;
    --border-color: #e8e8e8;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --primary-color: #40a9ff;
    --border-color: #333333;
}

JavaScript 控制

// 切换主题
function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
}

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

自定义主题

修改颜色

编辑 static/css/theme.css：

:root {
    --primary-color: #你的主色调;
    --success-color: #52c41a;
    --warning-color: #faad14;
    --error-color: #f5222d;
}

添加新主题

  1. 定义主题变量
  2. 添加切换按钮
  3. 实现切换逻辑

主题变量表

变量说明亮色暗色
--bg-color背景色#fff#1a1a1a
--text-color文字色#333#fff
--primary-color主色调#1890ff#40a9ff
--border-color边框色#e8e8e8#333
--shadow阴影rgba(0,0,0,0.1)rgba(0,0,0,0.5)

平滑过渡

主题切换时添加过渡动画：

* {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

持久化

用户的主题偏好保存在：

  • localStorage（临时）
  • 用户设置（登录后）