🎨 外观定制
Ophel 提供丰富的外观定制选项，让你打造专属的 AI 对话界面。
主题模式
模式选择
| 模式 | 说明 |
|---|---|
| ☀️ 浅色模式 | 明亮的日间主题 |
| 🌙 深色模式 | 护眼的夜间主题 |
自动适配
当你没有手动设置主题时，Ophel 会自动适配你的系统主题设置。修改系统明暗模式后，Ophel 会实时响应并切换到对应的主题。
预设主题
内置多款精心调配的主题预设：
浅色系列
| 主题 | 风格 |
|---|---|
| 🌐 Google 渐变 | 默认蓝绿渐变 |
| 💜 紫罗兰 | 优雅紫色 |
| 🌊 海洋蓝 | 清新海洋 |
| 🌸 樱花物语 | 柔美粉色 |
| 🌿 清新薄荷 | 活力青绿 |
| ❄️ 北欧霜雪 | 极简冷淡 |
| 🍋 柠檬苏打 | 明亮活力 |
| 📜 羊皮卷 | 复古纸张纹理 |
| ⬛ 极致黑白 | 纯粹单色 |
| 🏺 青花瓷 | 东方古典 |
| 🍪 奶油脆饼 | 莫兰迪治愈 |
深色系列
| 主题 | 风格 |
|---|---|
| 🖤 经典深黑 | 默认深色 |
| 🌙 午夜蓝 | 深邃蓝色 |
| 🌲 暗夜森林 | 深绿护眼 |
| 💗 赛博霓虹 | 高对比霓虹 |
| ☕ 醇香咖啡 | 暖调护眼 |
| 🌅 幻梦落日 | 紫橙渐变艺术 |
| 🧛 德古拉 | 经典极客 |
| 🐚 深海幽蓝 | 静谧蓝绿 |
| 🔴 猩红赤月 | 暗红狂野 |
| 💻 黑客终端 | 复古 CRT 扫描线 |
| 🤖 代号：暴走 | 机甲撞色 |
自定义 CSS
代码编辑器
内置专业的代码编辑器：
- ✨ 语法高亮
- 📝 自动补全
- 🔧 实时预览
- 💾 一键保存
示例代码
css
/* 自定义用户消息气泡 */
.user-message {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 16px;
}
/* 自定义 AI 回复背景 */
.assistant-message {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
/* 自定义代码块 */
pre code {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
}CSS 变量
Ophel 暴露了一系列 CSS 变量供自定义：
| 变量 | 说明 |
|---|---|
--ophel-primary | 主题色 |
--ophel-bg | 背景色 |
--ophel-text | 文字颜色 |
--ophel-border | 边框颜色 |
--ophel-radius | 圆角大小 |
保存与管理
- 📂 支持保存多个自定义样式
- 🔄 一键切换不同样式
- 📤 导出/导入样式配置
界面布局
大纲面板
- 📐 位置：左侧 / 右侧
- 📏 宽度：可拖拽调整
- 🔒 固定/浮动模式
字体设置
| 选项 | 范围 |
|---|---|
| 正文字号 | 12px - 20px |
| 代码字号 | 10px - 18px |
| 行高 | 1.4 - 2.0 |
快捷键
| 快捷键 | 功能 |
|---|---|
Alt + D | 切换明暗模式 |
Alt + , | 打开设置 |
Ctrl + Alt + T | 打开外观主题设置 |