主题与外观
Elftia 提供丰富的外观自定义选项，让你打造个性化的 AI 工作空间。本页详细介绍所有外观设置。
所有外观设置位于 设置 → 外观 页面。
主题模式
Elftia 支持三种主题模式：
| 模式 | 说明 |
|---|---|
| 浅色模式 | 暖白色背景，适合光线充足的环境 |
| 深色模式 | 暖炭色背景，降低眼睛疲劳，适合夜间使用 |
| 跟随系统 | 自动根据操作系统的深浅色设置切换 |
设置方法：
- 打开 设置 → 外观。
- 在 主题模式 区域，点击对应的模式卡片。
- 切换立即生效，无需重启。
Elftia 的深色模式采用暖色调而非纯黑，视觉上更柔和、舒适。浅色模式同样采用暖奶油色而非纯白，减少强光刺激。
强调色
强调色是界面中按钮、链接、选中状态等元素使用的主题色。
预设调色板
Elftia 提供一组精心挑选的预设颜色，点击即可应用：
- 每种预设颜色在浅色和深色模式下都经过调优，确保对比度和视觉效果良好。
- 预设调色板中的颜色覆盖暖色、冷色和中性色调。
自定义颜色
如果预设颜色不满足需求，你可以自定义强调色：
- 在调色板区域找到自定义颜色选项。
- 输入颜色值，支持以下格式：
- HEX：如
#FF6B35 - HSL：如
hsl(20, 100%, 60%)
- HEX：如
- 预览区域会实时显示应用该颜色后的效果。
选择强调色时，注意确保在浅色和深色模式下都有足够的对比度。过浅的颜色在浅色模式下可能不够醒目，过深的颜色在深色模式下也是同理。
字体设置
Elftia 允许你覆盖界面使用的字体。
UI 字体（Sans）
界面文字使用的无衬线字体，默认为 Inter。
- 在 字体 设置区域，找到 UI 字体输入框。
- 输入字体名称（需要是系统已安装的字体），例如：
"Noto Sans SC"— 思源黑体"Microsoft YaHei"— 微软雅黑"PingFang SC"— 苹方（macOS）
- 留空则使用默认字体 Inter。
代码字体（Mono）
代码块和编辑器使用的等宽字体，默认为 JetBrains Mono。
- 在代码字体输入框中输入字体名称，例如：
"Fira Code"— 支持连字的编程字体"Source Code Pro"— Adobe 出品的编程字体"Cascadia Code"— 微软出品的编程字体
- 留空则使用默认字体 JetBrains Mono。
字体修改后会立即应用到整个界面。如果指定的字体系统中未安装，浏览器会回退到默认字体。
壁纸
Elftia 支持为界面设置背景壁纸，并提供毛玻璃透明效果。壁纸来源支持图片和渐变两种，配合多层级的颜色 / 透明度调节，可以打造从纯净商务到沉浸氛围的各种风格。
壁纸来源
壁纸有两种互斥的来源（同时配置时，渐变优先）：
| 来源 | 设置方式 | 备注 |
|---|---|---|
| 图片壁纸 | 点击 切换图片 选择本地文件，或在输入框粘贴 URL | 自动复制到应用数据目录 themes/wallpapers/，浅色和深色模式共用同一张图 |
| 渐变背景 | 打开 渐变背景 开关，选择色数（单色 / 双色 / 三色 / 四色），逐个色槽设定颜色 | 启用后下方图片暂时隐藏；关闭开关即可恢复 |
支持的图片格式：JPG、PNG、WebP、GIF。
远程图片壁纸
- 在壁纸输入框中粘贴图片 URL（如
https://example.com/wallpaper.jpg）。 - 需要先在 高级设置 中启用 允许远程资源。
- 远程图片的域名需要在白名单中。
启用远程图片会向外部服务器发送请求加载图片。出于隐私考虑，默认关闭。只启用你信任的域名。
毛玻璃模糊度
| 参数 | 范围 | 默认值 | 说明 |
|---|---|---|---|
| 毛玻璃模糊度 | 0–30 px | 6 | 壁纸背后的高斯模糊程度。值越大壁纸越模糊，界面文字越清晰 |
背景遮罩（叠在壁纸上的着色层）
遮罩用于压暗或染色壁纸以提高可读性。0.1.11 起，遮罩颜色改为取色盘控制，并加入了亮度自动开关。
| 参数 | 范围 | 默认值 | 说明 |
|---|---|---|---|
| 遮罩强度 | 0–100 % | 70 | 整体不透明度。0 = 完全看到壁纸，100 = 完全覆盖 |
| 遮罩颜色 | 取色盘 | 中性灰 | 选择十六进制颜色；预览中即时生效 |
| 明度自动 | 开关 | 开 | 开启时遮罩亮度跟随模式（浅模式白、深模式黑）；关闭后取色盘的亮度直接生效 |
| 遮罩渐变 | 可选开关 + 1–4 色槽 | 关闭 | 启用后用线性渐变取代纯色遮罩；强度滑杆仍控制整体透明度 |
首次拖动遮罩颜色而强度为 0 时，系统会自动把强度提到 50 % 让你立即看到颜色效果。
推荐遮罩配置：
| 壁纸类型 | 毛玻璃模糊 | 遮罩强度 |
|---|---|---|
| 风景照片 | 6–12 | 60–75 |
| 渐变 / 纯色 | 0–4 | 50–65 |
| 繁忙图案 | 10–20 | 70–85 |
| 暗色图片 | 4–8 | 55–70 |
元素背景着色
侧边栏项、卡片、标签、tab 切换器等半透明面板默认跟随主题（浅色为暖奶油、深色为暖炭）。开启 元素背景着色 后可以用自定义颜色统一覆盖：
| 参数 | 默认 | 说明 |
|---|---|---|
| 元素背景着色（开关） | 关闭 | 关闭时使用主题默认色；打开后由下方颜色生效 |
| 着色颜色 | 取色盘 | 影响 rail / 卡片 / 标签 / tab / 上下文菜单等所有半透明表面 |
| 元素渐变 | 可选 | 与纯色互斥；开启后用 1–4 色渐变取代单色，每个层级仍保留独立透明度 |
输入框、Dialog/Modal 等需要保持实色的元素不会受影响。
消息气泡颜色
消息气泡（用户气泡 / 助手气泡）默认与"元素背景"统一颜色和透明度。0.1.11 起新增独立控制入口：
| 参数 | 默认 | 说明 |
|---|---|---|
| 单独控制（主开关） | 关闭 | 关闭时气泡跟随元素背景；打开后才显示下方专属选项 |
| 用户气泡 | 子开关 + 取色盘 | 独立设置用户消息气泡颜色 / 渐变 |
| 助手气泡 | 子开关 + 取色盘 | 独立设置助手消息气泡颜色 / 渐变 |
| 气泡透明度 | 0–100 %（默认 35） | 仅主开关开启时生效；数值越低气泡越通透，壁纸越清晰 |
每一侧的气泡都可以单独选择"纯色"或"渐变"——它们之间也是互斥关系（渐变启用时覆盖该侧纯色）。
想让所有半透明面板统一变成一种色调？开启 元素背景着色 即可，气泡会自动跟随。只有当你希望气泡和卡片用不同色彩区分时，再打开 单独控制。
其他高级参数
| 参数 | 范围 | 默认 | 用途 |
|---|---|---|---|
| 元素不透明度 | 0–100 % | 0 | 实验性：把所有半透明 UI 整体推向不透明（壁纸喧宾夺主时使用） |
| 壁纸通透度 | 0–100 % | 100 | 表面着色强度系数：0 = 表面完全透明（壁纸最清晰），100 = 默认表面着色 |
| 紧凑窗口禁用壁纸 | 开关 | 关 | 开启后在 Mini/Selection 等小窗口下自动关闭壁纸 |
删除壁纸
在壁纸输入框上方点击 清空 按钮（垃圾桶图标）即可移除当前壁纸图片。渐变背景另有 启用渐变 开关单独控制。
壁纸透明度的内部规则
设置壁纸后，界面会自动启用一套透明度规则：
- 主容器：35% 不透明度的毛玻璃效果
- 按钮和卡片：15–20% 不透明度的半透明效果
- 输入框：保持不透明，确保可读性
- 弹窗和对话框：保持不透明，不受壁纸影响
- 下拉菜单 / 上下文菜单：85% 不透明度的高可读性毛玻璃
这些数值是自动处理的，无需手动配置；上面介绍的"元素背景着色"和"消息气泡"会在保留这些层级 alpha 的前提下叠加你选择的色调。
自定义 CSS
对于进阶用户，Elftia 提供了一个完整的 CSS 编辑器，让你可以注入自定义样式来深度定制界面外观。
使用 CSS 编辑器
- 在 外观设置 中找到 自定义 CSS 区域。
- 点击展开编辑器，你会看到一个支持语法高亮的 CSS 代码编辑器。
- 编写自定义 CSS 代码。
- 代码会实时应用到界面，你可以立即看到效果。
示例：自定义消息气泡
{/* 修改用户消息气泡的背景色 */}
.chat-bubble[data-role="user"] {
background-color: hsl(var(--primary) / 0.15);
border-radius: 16px;
}
{/* 修改 AI 回复的字体大小 */}
.chat-bubble[data-role="assistant"] {
font-size: 15px;
line-height: 1.7;
}
示例：自定义侧边栏宽度
{/* 调整侧边栏宽度 */}
.session-panel {
width: 280px;
}
可用的 CSS 变量
你可以在自定义 CSS 中使用 Elftia 的主题变量：
| 变量 | 用途 |
|---|---|
--background | 页面背景色 |
--foreground | 主文本颜色 |
--surface-0 | 基础表面色 |
--surface-1 | 第一层表面色（卡片、容器） |
--surface-2 | 第二层表面色（输入框、次级容器） |
--surface-3 | 第三层表面色（弹出层） |
--primary | 主题强调色 |
--border | 边框颜色 |
--muted-foreground | 次要文本颜色 |
--destructive | 错误/危险操作颜色 |
--success | 成功状态颜色 |
操作按钮
CSS 编辑器上方提供以下操作：
| 按钮 | 功能 |
|---|---|
| 复制 | 将当前 CSS 复制到剪贴板 |
| 粘贴 | 从剪贴板粘贴 CSS |
| 撤销 | 恢复到上一次保存的状态 |
| 清空 | 删除所有自定义 CSS |
| 插入兼容模板 | 插入常用的兼容性 CSS 选择器模板 |
自定义 CSS 的功能很强大，但不当的样式可能导致界面布局异常。如果出现问题，在 CSS 编辑器中清空内容即可恢复默认样式。
主题配置文件
你可以将所有外观设置打包为主题配置文件进行导出和分享。
导出主题
- 在外观设置页面，找到 主题配置 区域。
- 点击 导出 按钮。
- 选择保存位置，配置以 JSON 格式保存。
导出内容包含：主题模式、强调色、字体设置、壁纸参数（不含图片文件）、自定义 CSS。
导入主题
- 点击 导入 按钮。
- 选择主题 JSON 文件。
- 预览导入效果，确认后应用。
你可以在社区中分享你创建的主题配置文件，也可以使用他人分享的主题来快速美化你的 Elftia。
代码编辑器外观
Elftia 内置的代码编辑器（CodeMirror）有独立的外观设置：
| 设置 | 说明 |
|---|---|
| 编辑器主题 | 选择代码编辑器的配色方案 |
| 自动换行 | 是否自动折行显示长代码行 |
| 行号 | 是否显示行号 |
| 缩略图 | 是否显示右侧缩略图 |
| 字体大小 | 代码编辑器的字体大小 |
这些设置位于外观页面的 代码编辑器 区域。
如果你在自定义外观时遇到显示异常，请尝试清空自定义 CSS 或导入一个已知正常的主题配置。更多帮助请参阅 常见问题。