用 electerm 当主力终端的人多多少少都会经历一个心理拐点功能挑不出毛病界面却越看越寡淡。默认主题偏灰浅色方案在一堆深色窗口里格外扎眼连着开四五个小时会话眼睛是真的酸。这时候很多人会去看 Termius倒不是馋它的功能而是那套视觉语言确实舒服——深蓝黑底、冷调强调色、圆角卡片、细边框信息密度高但不吵。问题是换工具的成本太高会话列表、密钥、本地文件传输、SFTP 面板都已经在 electerm 里跑顺了为了好看把整套工作流推倒重来不划算。所以真正的诉求其实很朴素在 electerm 里复刻一套类 Termius 风格的深色主题终端配色和界面皮肤都要改完不能影响功能升级之后也别崩。这篇就围绕这件事把我自己折腾这套主题时的完整思路、配色取值、配置写法、以及踩过的坑一次讲透适合刚上手 electerm 的新手也适合已经改过几轮但总差点意思的老用户。1. 先想清楚类 Termius 风格到底类在哪很多人一上来就开始抄色值结果抄完发现颜色是那个颜色气质完全不对。原因很简单Termius 的观感不是靠某一个颜色撑起来的它是一套成套的视觉规则。你只搬颜色不搬规则出来的效果就是一个换了油漆的旧房子。1.1 拆解 Termius 的视觉构成要素我把 Termius 的深色界面反复看过几遍归纳下来大概是这几条规则在起作用底色分层极其克制。它不是纯黑也不是常见的 #1E1E1E 灰黑而是带明显蓝相位的深色最底层接近 #0B0E1A往上一层是 #101322再往上是 #161B2E。三层之间亮度差很小靠的是细微的色相偏移来区分层级而不是靠大反差。强调色只有一个。整套界面里可交互元素的高亮基本收敛在同一个冷蓝上其他颜色只出现在状态指示成功绿、警告黄、错误红这种必须区分语义的地方。多色乱舞是廉价感的头号来源。圆角统一且偏小。卡片、按钮、标签的圆角基本在 6 到 8 像素这个区间不是那种大圆角的软萌风也不是直角硬边。统一圆角半径带来的秩序感比圆角具体多大更重要。边框几乎看不见但存在。相邻面板之间用 1 像素、低对比的描边分隔颜色只比背景亮一点点。它的作用是勾出边界不是吸引注意力。文字有明确的主次梯度。主文字接近 #C9D1E3 这种偏冷的浅灰白次要文字用 #8A93A8 左右禁用态再压一档。层次靠文字亮度拉开而不是靠字号乱变。把这五条记住后面所有色值和 CSS 都只是它们的落地形式。这也是为什么我不建议你去网上随便下载一份某某同款主题直接导入——你能拿到色号但拿不到这些取舍逻辑遇到界面变动就不知道怎么修了。1.2 electerm 和 Termius 的定位差异顺手把两者的差异摆清楚免得期望错位。electerm 是开源的跨平台终端与会话管理工具基于 Electron 构建优势在于 SSH、SFTP、串口、多标签、会话分组、本地与远程文件双栏操作这些东西全都在一个进程里配置文件是纯文本随便你改、随便你同步。Termius 则是商业产品界面打磨得更精致跨设备同步体验更顺滑但免费额度有克制很多便利功能属于付费范围。对咱们这件事的影响在于electerm 的可定制性其实比 Termius 更好因为它把终端配色和界面样式都暴露出来了前者是标准 JSON后者是可以直接写 CSS。缺点是它没有官方的皮肤包机制界面样式改动属于半自助性质需要你自己动手而且一部分类名会随版本迭代发生变化。所以下面所有涉及到具体类名的地方我都会提醒你先用开发者工具核对一遍别硬抄。提示改主题前永远先备份配置目录。CSS 写错最多是界面难看配置文件写坏有可能连会话列表都读不出来两分钟备份能省两小时排障。2. 搞懂 electerm 的主题分层别把两件事混成一件事新手最容易犯的错是把终端配色和界面皮肤当成同一件事。实际上这是两套完全独立的机制走的是两条路改错了地方就会出现终端变了但侧栏还是白的或者侧栏变深了但字符还是老配色这种半吊子效果。2.1 配置目录在哪动手前先做备份electerm 的所有用户数据都放在一个目录里不同系统路径不一样操作系统配置目录路径Windows%APPDATA%\electermmacOS~/Library/Application Support/electermLinux~/.config/electerm或~/.electerm目录里比较关键的几个文件会话与书签相关的 JSON、保存设置的主配置文件、以及自定义样式文件。名称在不同版本里略有差异建议直接打开目录看一眼不要凭记忆去猜。备份最简单的方式是把整个目录压缩一份命名带上日期比如electerm-backup-20250101.zip。我一般是改主题之前压缩一次改完确认没问题再压缩一次留一个能用的版本当回滚点。还有一个细节改配置前先把 electerm 完全退出不是关窗口是确认进程真的结束了。Electron 应用在退出时会把内存里的设置回写到磁盘你在它运行期间改文件关闭时很可能被覆盖掉然后你就会陷入我明明改了怎么打开又变回去了的自我怀疑。这种问题我踩过不止一次。2.2 终端配色和界面皮肤两条独立的路径终端配色走的是标准 JSON 那条路。终端渲染内核用的是 xterm 系的配色接口一个主题就是一份包含 16 个 ANSI 颜色加上背景、前景、光标、选中背景这些字段的 JSON 对象。这类主题的好处是通用性强你在 electerm 里写好的 JSON换个终端工具基本也能用属于一次写好到处复用。界面皮肤走的是 CSS 那条路。electerm 提供了自定义样式的能力你可以在设置里找到对应的入口把 CSS 写进去或者写到指定文件里。它作用于整个应用外壳——侧边栏、标签栏、弹窗、按钮、滚动条这些。这部分不通用是 electerm 专有的但也正因为专有你能改得更彻底。两条路要一起走才能得到从终端到外壳都是同一套语言的效果。只改一条的结果我形容给你听只改终端就像穿了一身正装在拖鞋上开会只改界面就像房间刷了高级灰但家具还是原木色总觉得哪儿不对。2.3 类名会变动手前先学会看开发者工具electerm 基于 Electron天生自带 Chromium 的开发者工具。快捷键一般是CtrlShiftImacOS 上是CmdOptionI打开之后切到元素检查面板点一下你想改的界面区域就能看到它的类名和当前生效的样式。这一步非常关键。网上流传的各种 CSS 片段很多是基于老版本的类名写的直接粘进去大概率没效果然后你会以为是electerm 不支持自定义样式。正确做法是先自己点一遍确认当前版本用的类名是什么再动手写。我自己维护这套主题的习惯是每次大版本升级后花五分钟点一遍关键区域把类名记在一个文本文件里作为自己的版本对照表。这个习惯帮我省掉了无数次无头苍蝇式的排查。另外提醒一点electerm 界面上大量组件用了现成的组件库这意味着很多样式带有较高的优先级。你写的 CSS 不生效八成不是写错了而是被组件库的规则压住了。这时候需要提高选择器权重或者在属性后面加!important。!important虽然被很多人嫌弃但在覆盖第三方组件样式这种场景下它是完全正当的工具不用有心理负担。3. 从零写一套类 Termius 深色主题配色取值与完整配置这部分是核心我会把色板怎么定、JSON 怎么写、字体怎么配一步步走完。3.1 定色板六个基准色撑起整套视觉不要一上来就写十六个 ANSI 颜色先定基准色。我给自己定的六个基准色是这样的用途色值说明主背景#0B0E1A终端和内容区底色带蓝相位不是纯黑次级背景#101322侧边栏、标签栏、面板背景三级背景#161B2E悬浮卡片、弹窗、选中项背景分割线#232A421 像素描边只比背景亮一点点主文字#C9D1E3会话名、正文、终端默认前景次文字#8A93A8路径、时间戳、说明文字强调色#5B8CFF可交互高亮、光标、选中边框定色板的时候我做了一个对比度验算这不是多余动作。按 WCAG 的相对亮度公式先把每个通道的值归一化到 0 到 1再按((c 0.055) / 1.055) ^ 2.4做线性化最后按0.2126 × R 0.7152 × G 0.0722 × B算出相对亮度L对比度就是(L1 0.05) / (L2 0.05)。拿主文字#C9D1E3配主背景#0B0E1A来算前者相对亮度约 0.6356后者约 0.0046代入公式得到约12.6 : 1。这个数值远超正文需要的 4.5 : 1也超过了更严格的 7 : 1 门槛说明长时间看不会累。次文字#8A93A8配同一个背景算下来约6.25 : 1作为辅助信息完全够用。强调色#5B8CFF我特意没用在正文上只用在光标、边框、激活态背景因为这些位置不需要长读对对比度要求可以放宽。我见过不少人为了追求高级灰把次文字做到 3 : 1 以下界面看着确实柔和但用两天就受不了了路径和端口号根本看不清。柔和和可读之间有条线这条线就是 4.5 : 1别越过去。3.2 终端十六色方案的完整 JSON基准色有了ANSI 十六色就好推了。原则是正常色前八个饱和度压低明亮色后八个提亮但保持同一色相这样才能保证ls出来的目录和文件有区分度又不会花成一盘菜。{ name: Termius Like Dark, theme: { background: #0B0E1A, foreground: #C9D1E3, cursor: #5B8CFF, cursorAccent: #0B0E1A, selectionBackground: #2A3355, black: #13151F, red: #F06B72, green: #4CD7A5, yellow: #E8C170, blue: #5B8CFF, magenta: #B78BFF, cyan: #4FD6E0, white: #C6CCDA, brightBlack: #4A5268, brightRed: #FF8A90, brightGreen: #6BE8BC, brightYellow: #F5D48C, brightBlue: #7FA6FF, brightMagenta: #CDA8FF, brightCyan: #74E4EC, brightWhite: #F0F3F9 } }几个取值的用意说一下。black我用了#13151F而不是#000000因为纯黑在深色背景上会出现黑洞感尤其是终端里那些用黑色当分隔线的程序纯黑会糊成一片。brightBlack给到#4A5268这是注释色很多命令行工具的提示语句用它压太暗会看不清。selectionBackground用#2A3355我验算过它配白色文字的对比度约12.3 : 1选中终端里一段日志再复制的时候边界非常清楚。这套色值我在终端里跑ls --color、git log --graph、htop都试过git log的彩色分支持线能清晰区分开不会出现两个蓝色分支看着一模一样的情况。如果你有 ColorBrewer 那类配色工具的偏好可以在blue和magenta之间再拉一点色相差但别超过舒适区。这份 JSON 在 electerm 的设置界面里有专门的终端主题管理入口可以新增并粘贴进去也可以直接写进配置目录里对应的主题文件。两种方式效果一样我偏向写文件因为可以版本管理换电脑直接带过去。3.3 让主题在每本书签上真正生效这里是最容易漏的一步也是我被问得最多的问题主题加了为什么新开的会话还是旧配色因为 electerm 的主题是按书签会话绑定的不是全局强制。你在设置里新增了一个主题只是让这个主题可用了具体哪个会话用它得在会话的编辑界面里单独选。所以正确的顺序是先在设置里新增并保存终端主题打开你想应用的书签进入编辑在终端主题或外观相关的下拉里选中刚建的那套保存后关闭会话重新打开让新配置生效。如果你有几十个会话一个个点会很痛苦。这时候有个取巧办法直接编辑配置目录里保存书签的那个 JSON 文件用文本替换的方式批量把主题字段改成新主题的名字。改之前记得备份改完先在程序关闭状态下保存再打开验证几个会话。批量替换这个操作我做过两回一次成功一次翻车——翻车那次是因为手抖替换了字段名相似的另一个配置项所以替换字符串要选得足够独特别用一个字母当关键词。顺带说一句会话断开重连时主题不会丢但如果你的会话是从别的地方导入的旧配置导入后主题字段可能是空的会回退到默认主题。批量导入之后花一分钟扫一眼比事后再补要省事。3.4 字体搭配连字和中文字宽的取舍配色搞定了字体不对一样白搭。类 Termius 风格给我的感觉是克制、清晰、有技术感字体选择也要往这个方向靠。英文等宽字体我推荐几个方向一类是带连字的比如常见的编程连字字体-会渲染成箭头!会连成一体视觉上很讨喜另一类是不带连字的纯粹干净。我个人的选择是不带连字的方案原因是调试日志里偶尔会出现需要精确辨认字符的场景连字会让!和的边界变模糊看错一次能排查半天。中文字体才是真正的难点。混排最怕的是中文和英文字符宽度对不齐导致输出中文表格或者中文日志时列全歪掉。解决方案是选一款等宽中文 覆盖拉丁的一体化字体或者用字体回退链把中文字体挂在英文字体后面。配置上就是在字体族里按优先级排列英文在前中文在后。设置完之后拿几个典型的输出去验证中文和英文混排的目录列表、带边框的表格输出、以及进度条这类依赖对齐的界面。如果出现列歪优先怀疑字体不是严格等宽而不是终端设置问题。顺便说字体需要先装到系统里electerm 的字体设置只负责指定名字不负责安装字体。你写了一个系统里没有的字体名它会静默回退到默认字体表现就是设置了没反应。4. 界面细节打磨把能用做成耐看终端配色是第一层界面皮肤是第二层。这一层做得好整体气质才立得住。4.1 自定义样式的骨架先搭起来写 CSS 我习惯先定义一组变量把所有色值收口到顶部后面所有规则都引用变量。这样做的好处是以后想微调色板只改一处。骨架大概是这样/* 类 Termius 深色皮肤 */ :root { --tt-bg: #0B0E1A; --tt-bg-2: #101322; --tt-bg-3: #161B2E; --tt-line: #232A42; --tt-fg: #C9D1E3; --tt-fg-dim: #8A93A8; --tt-accent: #5B8CFF; --tt-accent-soft: rgba(91, 140, 255, 0.16); --tt-radius: 6px; } body { background: var(--tt-bg-2); color: var(--tt-fg); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2A3355; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tt-accent); }滚动条这一块我说句实话改动不大但收益极高。系统默认滚动条在深色背景上是浅灰色的特别突兀换成深色加圆角之后整个界面的沉浸感会明显上一个台阶。4.2 侧栏、标签栏、弹窗的三处重点骨架搭好之后按我个人的优先级重点收拾三个地方。侧边栏是整个应用里面积最大的色块它定调。目标是让它的背景比主内容区略深一点同时会话项的选中态用强调色的低透明度版本打底加一条细的左侧高亮边。这里要注意的是选中态如果用满饱和的强调色铺底会觉得刺眼用rgba(91, 140, 255, 0.16)这种低透明度的叠加既有辨识度又柔和。标签栏决定你同时开八个会话时的秩序感。我的做法是标签背景整体压低到和侧栏一致激活标签用次级背景色提亮一档并加 1 像素顶部高亮线。这样即使开很多标签视觉重心也只在当前这一个上不会满屏跳动。弹窗和下拉菜单最容易破坏一致性。很多组件库的弹窗默认是浅色的一打开就是一片惨白。这里必须显式覆盖背景、文字色和边框色三件套。我一般会写一组通用规则覆盖弹窗容器、下拉面板和输入框写的时候用开发者工具逐个确认类名别凭印象写。写完这三处之后你会发现界面已经有七成像了。剩下的细节比如按钮的圆角、状态小圆点的颜色、分割线的粗细都属于打磨范畴可以慢慢来。4.3 状态色要收敛别让它变成调色盘这一条是我自己改了三四轮才想明白的。一开始我给连接成功、连接中、断开分别用了绿、蓝、红三种鲜明的颜色结果侧栏一长串会话看下来五颜六色像节日灯串反而看不出哪个有问题。正确的思路是状态只用亮度和小圆点来区分颜色只在异常时出现。正常连接的会话用一个小尺寸的低饱和绿色圆点就够了连接中的用强调色的呼吸态只有一个会话出错时才用红色。这样异常会话在列表里跳出来才真正起到提示作用。这个原则其实和前面说的强调色只有一个是同一套逻辑。界面设计的本质是注意力分配颜色是稀缺资源撒得越广越不值钱。5. 踩过的坑常见问题速查下面这些是我自己或者帮别人排障时遇到的真实情况整理成表方便对照。现象大概率原因处理方式自定义样式完全不生效没在设置里开启对应开关或文件写在了错误路径检查设置项是否启用确认文件位置重启应用终端配色没变化主题没在具体书签上选中逐个会话编辑指定终端主题改完重启又变回去程序运行时改了文件退出时被覆盖完全退出进程后再修改配置部分区域仍是浅色组件库样式优先级更高提高选择器权重或使用!important中文和英文列对不齐字体不是严格等宽或缺少中文回退换成等宽中文字体或补全字体族回退链设置了字体没反应系统里没装这个字体静默回退先安装字体再设置字体名大版本升级后样式错乱界面类名发生变化用开发者工具重新确认类名更新 CSS日志里字符看错字体连字导致符号形近关闭连字或换用无连字字体5.1 改完没反应按这个顺序排查遇到改了没生效不要乱试按固定顺序走第一步确认程序是完全重启过的不是刷新窗口第二步确认自定义样式开关是打开的第三步打开开发者工具手动给目标元素加一条明显到不可能看漏的样式比如红色边框看看能不能生效。如果手动加能生效说明你的 CSS 文件没被加载问题在路径或开关上如果手动加也不生效说明选择器没选中目标元素类名写错了。这个红色边框测试法我用了很多年它能在一分钟内把问题定位到加载层还是选择层比盲改省事得多。5.2 升级之后样式错乱怎么快速恢复electerm 版本迭代时界面类名偶尔会调整这是 Electron 类应用的通病不是谁的错。应对方式有两个一是前面说的维护自己的类名对照表升级后快速比对二是把 CSS 拆成基础层和细节层基础层只写色值和滚动条这部分几乎不会失效细节层写具体的面板样式失效了最多是某个区域变回默认不会整个界面崩掉。我现在的做法是保留一个最小可用 CSS只有二十来行全是变量和滚动条。万一哪天大改崩了先切回最小可用版本保证能正常干活再慢慢补细节。这个策略听着保守但实际用起来非常省心。5.3 多设备同步和备份别靠手动复制如果你像我一样在几台机器上都有会话主题配置的同步值得花十分钟搭一下。最简单的办法是把配置目录里跟主题和样式相关的几个文件单独拎出来放进你自己的版本管理仓库每次改完提交一次。这样换机器、重装系统pull 一下就能恢复。注意两个细节一是不要把包含密钥和敏感信息的整个配置目录无脑提交到公开位置只挑选样式和主题相关的文件二是不同系统之间的路径写法可能有差异同步过去的配置如果引用了绝对路径需要检查一遍。6. 关于这套主题我自己用了半年的一些体会写完这套主题到现在差不多半年中间改过四五轮最后稳定下来的其实比最初设计时简单很多。最开始我恨不得把每个面板都重新定义一遍色板里塞了十来种颜色越改越复杂最后反而没有一个地方是对的。后来把颜色砍到六个圆角统一到一个值强调色只留一个界面立刻就清爽了。这件事让我确认了一个判断主题定制的难点从来不是技术是克制。还有一点是别迷信网上的同款主题包。同一份 CSS在你的版本、你的屏幕上效果可能完全不一样尤其是屏幕色域和系统缩放比例的影响很大。我建议你拿我上面这套色板当起点然后自己盯着屏幕调把背景调深一点、把强调色调冷一点调到眼睛舒服为止。配色这件事有客观标准对比度但没有唯一答案你的眼睛才是最终裁判。最后分享一个小技巧主题调完之后别只在看起来好看的界面下测试一定要打开一个真实项目跑一跑。用top、vim、git diff、带彩色输出的构建日志各看一遍很多配色问题只有在这种真实场景下才会暴露出来比如 diff 的红绿底色在深色背景上太扎眼或者黄色警告在亮度偏低的屏幕上几乎看不见。我就是在跑了一次完整构建之后把警告黄从#E8C170调亮到#F5D48C的。静态截图骗人真实输出才骗不了人。