主题模式功能移植说明

概述

已成功将 typecho-default-ultra-theme-2.5 主题的主题模式切换功能移植到 typecho-theme-final 主题。

新增功能

1. 主题模式切换

亮色模式：适合白天浏览，白色背景，深色文字
深色模式：适合夜间浏览，深色背景，浅色文字
护眼模式：米黄色背景，棕色文字，长时间阅读更舒适
跟随系统：自动根据系统设置切换主题

2. 切换方式

下拉选择器：在页面顶部显示主题模式选择器，可选择四种模式
悬浮按钮：在页面右下角显示悬浮切换按钮（可选），点击在三种模式间轮换

3. 记忆功能

用户选择的主题模式会自动保存到浏览器 localStorage
下次访问时自动应用上次选择的主题模式

修改文件清单

1. functions.php

位置: typecho-theme-final/functions.php

新增配置项:

themeModeSelectStatus: 是否启用主题模式切换（是/否）
defaultThemeMode: 默认外观（跟随系统/亮色模式/深色模式/护眼模式）
themeModeMinitoolStatus: 是否启用主题模式切换悬浮按钮（是/否）

2. header.php

位置: typecho-theme-final/header.php

修改内容:

在 <body> 标签添加 theme-mode="" 属性
在 <header> 内添加主题模式选择器（下拉菜单，包含4个选项）

3. footer.php

位置: typecho-theme-final/footer.php

新增内容:

主题模式切换悬浮按钮 HTML（带太阳/月亮/书本图标）
主题模式切换 JavaScript 逻辑
- 初始化主题模式
- 监听用户切换事件
- 监听系统主题变化
- 保存用户偏好到 localStorage
- 悬浮按钮三模式轮换（亮色→深色→护眼→亮色）

4. style.css

位置: typecho-theme-final/style.css

新增样式:

:root - 默认 CSS 变量（亮色模式）
[theme-mode="light"] - 亮色模式 CSS 变量
[theme-mode="dark"] - 深色模式 CSS 变量
[theme-mode="read"] - 护眼模式 CSS 变量
#themeMode-selector - 主题选择器样式
.minitool-group - 悬浮按钮组样式
.themeMode-minitool - 主题切换按钮样式
图标显示/隐藏控制样式（太阳/月亮/书本）

使用方法

1. 启用主题模式切换

在 Typecho 后台进入 外观 → 设置外观：

是否启用主题模式切换: 选择 "是"
默认外观: 选择默认主题模式
- 跟随系统：根据用户操作系统设置自动切换
- 亮色模式：始终使用亮色主题
- 深色模式：始终使用深色主题
- 护眼模式：始终使用护眼主题（米黄色背景）

2. 启用悬浮切换按钮（可选）

如果希望在页面右下角显示快速切换按钮：

是否启用主题模式切换: 选择 "是"
是否启用主题模式切换悬浮按钮: 选择 "是"

3. 用户使用体验

方式一：使用下拉选择器

在页面顶部找到主题模式下拉菜单
选择想要的主题模式（跟随系统/亮色模式/深色模式/护眼模式）
页面立即切换到选中的主题模式

方式二：使用悬浮按钮

点击页面右下角的圆形按钮
在三种模式之间循环切换：亮色 → 深色 → 护眼 → 亮色
太阳图标 ☀️ = 当前为亮色模式
月亮图标 🌙 = 当前为深色模式
书本图标 📖 = 当前为护眼模式

技术实现细节

CSS 变量系统

使用 CSS 变量实现主题切换，所有颜色通过变量控制：

:root {
    --background-color: #fff;
    --text-color: #222;
    --link-color: #222;
    --code-background-color: #F0F0F0;
    /* ... 更多变量 ... */
}

[theme-mode="dark"] {
    --background-color: #1c1c1c;
    --text-color: #e0e0e0;
    /* ... 深色模式变量 ... */
}

[theme-mode="read"] {
    --background-color: #F2F1EA;
    --text-color: #474135;
    /* ... 护眼模式变量 ... */
}

JavaScript 逻辑

使用 localStorage 存储用户偏好
使用 window.matchMedia('(prefers-color-scheme: dark)') 检测系统主题
使用 addEventListener('change') 监听系统主题变化
通过修改 <body> 的 theme-mode 属性触发 CSS 变量切换

兼容性

支持所有现代浏览器（Chrome, Firefox, Safari, Edge）
使用原生 JavaScript，无需额外依赖库
CSS 使用标准语法，兼容性良好

注意事项

必须先启用"主题模式切换": 悬浮按钮依赖主题模式切换功能，必须先启用
LocalStorage 依赖: 主题偏好存储在浏览器 localStorage，清除浏览器数据会重置为默认主题
跟随系统模式: 选择"跟随系统"时，主题会根据操作系统的日间/夜间模式自动切换
移动端适配: 悬浮按钮在移动端同样可用，位置和大小已优化

效果预览

亮色模式

背景：白色 (#fff)
文字：深灰色 (#222)
代码块背景：浅灰色 (#F0F0F0)

深色模式

背景：深灰色 (#1c1c1c)
文字：浅灰色 (#e0e0e0)
代码块背景：深灰色 (#2d2d2d)

护眼模式

背景：米黄色 (#F2F1EA)
文字：棕色 (#474135)
链接：蓝灰色 (#4F6D96)
代码块背景：浅米黄 (#EBE9E0)

完成情况

✅ functions.php - 添加配置项
✅ header.php - 添加选择器和 body 属性
✅ footer.php - 添加悬浮按钮和 JavaScript 逻辑
✅ style.css - 添加主题模式样式和 CSS 变量

所有功能已完成移植，可以正常使用！

后续优化建议

~~可以考虑添加更多主题模式（如护眼模式）~~ ✅ 已完成
可以优化过渡动画，让主题切换更流畅
可以添加主题预览功能
可以考虑添加自定义主题颜色功能
可以添加更多护眼模式的色彩方案供选择