主题

OxideTerm 包含一个全面的主题引擎，让你可以自定义应用外观的方方面面——从终端 ANSI 颜色到整个 UI 界面。

内置主题

OxideTerm 附带 30+ 内置主题，均针对终端可读性优化。默认深色主题专为长时间终端工作设计，精心选择了对比度比例。

主题涵盖多种风格：经典深色/浅色、Dracula、Solarized、Monokai、Nord、One Dark、Gruvbox、Tokyo Night 等。

自定义主题

通过带实时预览的可视化编辑器创建自己的主题。更改即时可见——无需重启。

终端颜色（20 个字段）

自定义全部 16 种 ANSI 颜色加 4 个额外字段：

字段	描述
ANSI 0–7	标准颜色（黑、红、绿、黄、蓝、品红、青、白）
ANSI 8–15	高亮/粗体变体
前景色	默认文本颜色
背景色	终端背景
光标色	光标颜色
选区色	文本选择高亮

CSS 变量（23 个变量）

通过 CSS 自定义属性自定义整个应用 UI：

背景层（7 个变量）

变量	用途
`--theme-bg`	主背景
`--theme-bg-panel`	面板/侧边栏背景
`--theme-bg-hover`	悬停状态背景
`--theme-bg-active`	激活/按下状态
`--theme-bg-secondary`	次要背景区域
`--theme-bg-elevated`	浮起表面（对话框、菜单）
`--theme-bg-sunken`	凹陷表面（输入框、凹槽）

文本层（4 个变量）

变量	用途
`--theme-text`	主文本颜色
`--theme-text-muted`	柔和/次要文本
`--theme-text-secondary`	第三级文本（时间戳、提示）
`--theme-text-heading`	标题文本颜色

边框层（3 个变量）

变量	用途
`--theme-border`	标准边框
`--theme-border-strong`	强调边框
`--theme-divider`	分隔线

强调色层（4 个变量）

变量	用途
`--theme-accent`	主强调色（按钮、链接）
`--theme-accent-hover`	强调色悬停状态
`--theme-accent-text`	强调色背景上的文本
`--theme-accent-secondary`	次要强调色元素

语义层（5 个变量）

变量	用途
`--theme-success`	成功指示器
`--theme-warning`	警告指示器
`--theme-error`	错误指示器
`--theme-info`	信息指示器
`--theme-selection`	非终端选区颜色

字体自定义

字体系列 — 终端等宽字体
字体大小 — 像素值
行高 — 行间距

自动衍生

主题引擎可自动从终端 ANSI 调色板生成 UI 颜色：

设置你偏好的终端 ANSI 颜色（16 种标准颜色）
在主题编辑器中点击 自动衍生
OxideTerm 分析调色板的色相、饱和度和亮度
生成与终端调色板协调一致的背景色、文本色、边框色和强调色

这意味着你可以从任何终端配色方案出发，一键获得匹配的完整应用主题。

衍生规则

自动衍生算法将终端颜色映射到 UI 颜色：

终端源	生成的 UI 颜色
`background`	`bg`、`bgPanel` (+15)、`bgHover` (+30)、`bgActive` (+40)、`bgSecondary` (+10)
`foreground`	`text`
`brightBlack`	`textMuted`；与前景色混合 → `textSecondary`
`background`	`border` (+30)、`divider` (+20)
`cursor`	`accent`、`accentHover` (−20)；与背景色混合 → `accentText`
`brightBlack`	`accentSecondary`
`green`	`success`
`yellow`	`warning`
`red`	`error`
`blue`	`info`

+N 表示对每个 RGB 通道添加固定增量（钳制在 0–255）。用户始终可以手动覆盖任何衍生颜色。

主题编辑器

可视化主题编辑器提供：

主题名称 输入 — 自由文本；自动生成 slug 作为主题 ID
基于下拉菜单 — 创建新主题时可从任何内置主题复制
实时预览 — 迷你终端模拟，带彩色提示符、git 输出和闪烁光标；UI 镀铬条显示强调色按钮、悬停状态、面板和语义状态点
终端颜色标签 — 4 列 20 个色块网格，每个带原生取色器和十六进制输入（#RRGGBB）
UI 颜色标签 — 五个分组区域（背景、文本、边框、强调色、状态色），带”从终端自动衍生”按钮
保存 — 持久化到 localStorage 并立即生效
删除 — 移除自定义主题（仅编辑模式）

应用主题

打开设置 → 外观
浏览内置主题并即时预览
选择主题即时生效——无需重启
点击新建主题并使用可视化编辑器创建自定义主题

内置主题工作原理

内置主题在 CSS [data-theme="..."] 块中定义 UI 变量。选择内置主题时，<html> 元素的 data-theme 属性被更新，xterm.js 接收对应的配色方案。

自定义主题工作原理

自定义主题完全绕过 data-theme。通过 style.setProperty() 在 <html> 元素上直接设置所有 19+ CSS 变量，利用 CSS 优先级覆盖内置主题块。

存储格式

自定义主题存储在 localStorage 的 oxide-custom-themes 键下：

{
  "custom:my-neon": {
    "name": "My Neon",
    "terminalColors": {
      "background": "#0a0a0f",
      "foreground": "#e0e0ff",
      "cursor": "#ff00ff",
      "black": "#1a1a2e",
      "red": "#ff3366"
    },
    "uiColors": {
      "bg": "#0a0a0f",
      "bgPanel": "#14142a",
      "accent": "#ff00ff",
      "success": "#00ff88",
      "warning": "#ffcc00",
      "error": "#ff3366",
      "info": "#3388ff"
    }
  }
}

主题 ID 遵循 custom:{slug} 模式，slug 由显示名称衍生（小写，非字母数字字符替换为连字符，保留 CJK 字符）。

分享主题

导出：将自定义主题保存为 JSON 文件
导入：从设置面板加载 JSON 主题文件
主题 JSON 文件包含所有终端颜色、CSS 变量和字体设置，单个文件即可移植