Extract HTML template into separate views file

README.md

@@ -7,7 +7,7 @@
 - **双栏布局** — 左侧文件导航树 + 右侧内容预览
 - **自动导航** — 启动时递归扫描目录结构，生成可折叠的文件树
 - **元信息展示** — 显示笔记标题、创建时间、修改时间、字数统计
-- **浅/暗主题** — 一键切换，主题偏好自动保存到 localStorage
+- **主题包机制** — 内置多套主题，主题与明暗模式分离，方便后续扩展
 - **可隐藏侧边栏** — 专注于阅读内容
 - **搜索过滤** — 侧边栏顶部搜索框，快速过滤文件（快捷键 `Ctrl+K` / `Cmd+K`）
 - **代码高亮** — 基于 highlight.js，支持 190+ 编程语言
@@ -56,7 +56,7 @@ webook ~/my-notes --host=0.0.0.0 --title="我的知识库"
 | `--port, -p <number>` | 监听端口（被占用时自动递增） | `8000` |
 | `--host, -h <address>` | 监听地址 | `127.0.0.1` |
 | `--title, -t <title>` | 网站标题 | 根目录名 |
-| `--theme <path>` | 自定义 CSS 主题文件路径 | 无 |
+| `--theme <path>` | 额外叠加的自定义 CSS 文件路径 | 无 |
 | `--open` | 启动后自动打开浏览器 | `false` |
 | `--version, -V` | 显示版本号 | — |
 
@@ -89,8 +89,9 @@ webook ./docs --theme=./my-theme.css
 
 ### 主题切换
 
-- 点击工具栏 `🌙` / `☀️` 按钮切换浅/暗主题
-- 选择会自动保存，下次打开保持
+- 顶部下拉框可切换内置主题包
+- 点击工具栏 `🌙` / `☀︎` 按钮切换浅/暗模式
+- 主题包与明暗模式都会自动保存，下次打开保持
 
 ### 移动端
 
@@ -98,28 +99,69 @@ webook ./docs --theme=./my-theme.css
 - 点击右下角浮动按钮打开侧边栏
 - 点击遮罩层或选文件后自动关闭
 
-## 自定义主题
+## 主题扩展
 
-通过 `--theme` 参数传入外部 CSS 文件路径（支持相对路径和绝对路径），CSS 文件必须是有效的 CSS。建议参考 `public/style.css` 中的 CSS 变量：
+### 内置主题目录
+
+每个主题都放在独立文件夹下，便于后续新增、替换和维护：
+
+```text
+public/themes/
+├── default/
+│   ├── manifest.json
+│   ├── theme.css
+│   ├── highlight-light.css
+│   └── highlight-dark.css
+└── paper/
+    ├── manifest.json
+    ├── theme.css
+    ├── highlight-light.css
+    └── highlight-dark.css
+```
+
+`manifest.json` 示例：
+
+```json
+{
+  "id": "paper",
+  "label": "Paper",
+  "defaultMode": "light",
+  "stylesheet": "theme.css",
+  "highlight": {
+    "light": "highlight-light.css",
+    "dark": "highlight-dark.css"
+  }
+}
+```
+
+`theme.css` 通过 `data-theme-id` 和 `data-color-mode` 覆盖变量。建议参考 `public/themes/default/theme.css`：
 
 ```css
-:root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8f9fa;
-  --text-primary: #212529;
-  --text-secondary: #6c757d;
-  --border-color: #dee2e6;
-  --accent-color: #4a90d9;
+html[data-theme-id="paper"][data-color-mode="light"] {
+  --bg: #f3ece1;
+  --text: #3f2f21;
+  --brand: #8a5a2b;
+  --body-bg: linear-gradient(180deg, #fff8ed 0%, #f3ece1 100%);
   /* ... */
 }
 
-[data-theme="dark"] {
-  --bg-primary: #1a1b1e;
-  --text-primary: #c1c2c5;
+html[data-theme-id="paper"][data-color-mode="dark"] {
+  --bg: #17120d;
+  --text: #f1e4d4;
+  --brand: #d1a16c;
   /* ... */
 }
 ```
 
+### 外部覆盖样式
+
+通过 `--theme` 参数传入外部 CSS 文件路径（支持相对路径和绝对路径），会在内置主题之后加载，适合做局部覆盖：
+
+```bash
+webook ./docs --theme=./my-theme.css
+webook ./docs --theme=/absolute/path/to/my-theme.css
+```
+
 ## 目录结构要求
 
 webook 只扫描 `.md` 和 `.markdown` 文件。目录推荐按主题分组：